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

Question

我不知道为什么我没有得到它。不管怎样，这让我难以置信。我浏览了两本 jquery 书籍、网络教程和堆栈溢出帖子，但我仍然不明白。

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

如何将用户使用 jquery/ajax 选择的任何表单单选框的值提交到 php 页面，该页面将根据输入显示结果，无需刷新页面。

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

老实说，我浏览了很多不同的答案，但他们都认为读者比我对 javascript/jquery 有更深入的了解。

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

假设我是一个完整的 jQuery/ajax 菜鸟，有人可以向我解释一下吗？

Answer 1

您只需将 ajax 调用附加到单击提交按钮时来自表单的“提交”事件：

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

我假设您的结果显示在具有“内容”类的元素中。

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