如何使用jquery提交表单数据？

Question

我不知道为什么我不明白。不管怎样，这让我难以置信。我已经阅读了2本jquery书籍、网络教程和堆栈溢出帖子，但我仍然不明白。

我正在尝试构建一个搜索筛选栏，用户可以在其中选择筛选器，并在单击“细化结果”时修改查询输出。

如何将用户使用jquery/ajax选择的任何形式的单选框的值提交到php页面，该页面将显示依赖于输入的结果，而不需要刷新页面。

1. 表格->
2. 用户选择单选按钮值并单击submit->
3. 表单数据通过jquery/ajax发送到.php页面，该页面的输出将在不刷新页面的情况下显示->
4. .php文件处理用户输入并基于它创建输出。

我认真地看过许多不同的答案，但所有的答案都假设读者对javascript/jquery的基本知识比我更多。

比如，我是否必须将jQuery/ajax放在运行提交按钮"onclick“的函数中？还是为我的按钮id添加一个.click事件处理程序？

如果我是一个完整的jQuery/ajax，有人能向我解释这一切吗？

Answer 1

单击submit按钮时，只需将ajax调用附加到来自表单的"submit“事件：

$('form').submit(function(e){
    e.preventDefault();
    $('.content').load(this.action+" .content", $(this).serialize(), function(){
        // code to execute after result display if needed
    });
    return false;
});

我假设您的结果显示在一个具有"content“类的元素中。

1. $('form')选择您的表单，您可以将其个性化。
2. .submit将事件处理程序附加到表单“提交事件”
3. e.preventDefault()和return false阻止表单实际提交
4. $('.content').load将使用ajax调用结果填充"content“类。
5. this.action是将表单提交给
6. " +.content"只从响应中提取结果部分，而不是整个html页面。
7. $(this).serialize()将表单字段数据传递给ajax请求。
8. 最后，在显示结果之后调用最后一个匿名函数，并可用于触发一些视觉效果，指示结果已被更新。