0

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

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

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

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

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

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

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

4

1 回答 1

2

您只需将 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 调用结果填充“内容”类的元素
  5. this.action是提交表单的 URL
  6. " +.content"在这里只提取响应中的结果部分，而不是整个 html 页面
  7. $(this).serialize()将表单字段数据传递给 ajax 请求
  8. finally 显示结果后调用最后一个匿名函数，可用于触发一些视觉效果，表明结果已更新
于 2012-10-03T20:16:52.397 回答