如何将普通PHP表单转换为使用JQuery提交的表单？

我已经阅读了很多文章，这里也有很多问题，但我仍然对如何在我自己的工作中实现这些功能感到困惑，如果能提供一些有用的指导，我将不胜感激

我已经有了一个包含两个单独表单的页面——一个是带有一些下拉菜单和文本框输入的简单搜索——我认为这一个应该更容易实现

高级搜索表单通过将简单搜索字段中的任何内容复制到一些隐藏输入中来包含简单搜索值。此表单还基于一行三个下拉列表，用户可以随时克隆和删除这些下拉列表，以允许搜索任意数量的输入

我的主要困惑是表单操作指向同一个页面，我的所有php代码都用于获取值和构造MySQL查询等，因此我不知道如何使用AJAX请求的

success

部分

如果您希望查看该页面，则该页面的完整代码为

显示高级搜索的小提琴如下：

---

因此，基本上，我想尝试并找出的是如何将一个工作完美的静态表单转换为一个使用JQuery提交并显示良好的“搜索”预加载程序的表单。这里有两种方法：

拆分页面呈现和搜索处理代码。搜索处理代码应以特定格式（HTML、XML、JSON）返回搜索结果。在获得搜索结果后，您可以根据需要以任何方式显示它们

保持代码原样，并解析AJAX调用返回的数据以从中提取搜索结果部分。如果这样做，AJAX调用将返回整个页面。所以，使用jQuery的

find

方法，您需要从中提取搜索结果部分

---

这是否回答了您的问题？

使用。这是一种非常简单的方法来调整现有表单。

我们会，你肯定已经完成了这里的艰苦工作；-）它的jQuery端相当直截了当。您可以使用序列化的表单数据查询服务器。让你走上正轨的东西：

$form = $('.advancedsearchform');

$form.submit(function() {

    $.ajax($form.attr('action'), {
      data: $form.serialize(),
      dataType: 'JSON',
      type: 'post', 

          beforeSend: function() {
            var $load = $('#loadingmessage');
            if (!$load.length)
            {
                $load = $('<div id="loadingmessage">').appendTo($form);
            }
            $load.html('Loading... Please wait...');
        },

        success: function(response) {
            // response is the text sent back by server
            // maybe you could use json_encode in PHP with a success message?
        },

        complete: function() {
            // Hide loading message:
            $('#loadingmessage').hide();
        }
    });

      return false; // Cancel default event
});

$form=$（'.advancedsearchform'）；
$form.submit（函数（）{
$.ajax（$form.attr（'action'）{
数据：$form.serialize（），
数据类型：“JSON”，
键入：“post”，
beforeSend:function（）{
var$load=$（“#加载消息”）；
如果（！$load.length）
{
$load=$（''）.appendTo（$form）；
}
$load.html（'正在加载…请稍候…'）；
},
成功：功能（响应）{
//响应是服务器发送回的文本
//也许您可以在PHP中使用json_编码并发送成功消息？
},
完成：函数（）{
//隐藏加载消息：
$（“#加载消息”）.hide（）；
}
});
返回false；//取消默认事件
});

谢谢，我实际上已经看过了该插件，但有一件事我不确定，如果我将表单的操作与提交表单的页面放在同一个页面上，这是否会起作用？您的成功消息基本上是由服务器发送的，通常是JSON格式，并将包含您的查询结果，即您的搜索结果。例如，返回的文本将是：

{'html'：'result1result2'，'result'：'success'}

然后您可以在success函数中像简单的javascript对象一样读取这些值：

response.html

或

response.result

——记住将

dataType

设置为“json”，以便json响应转换为javascript对象。您的另一个选择是以更复杂的json格式发送响应，例如

[{'author'：'Gary Green'，'book'：'Best coding practices'}，{'author'：'Martin'，'book'：'Star wars！'}]

--尽管这需要将结果处理为HTML。它在服务器端保持HTML结构/javascript之间找到了平衡。您应该在testdocs-db.php中接收post值——完成所有处理后，将结果HTML放入一个变量，即

$json['HTML']='blah
您的搜索结果HTML'然后只需通过
echo json\u encode（$json）
回显即可。jQuery将在success函数中接收它，并将其转换为javascript对象。作为测试，尝试回显：
echo'{“test”：“hello！”}success:function（response）{alert（response.test）；}
谢谢。您是否能够启用“网络”选项卡并查看浏览器发送的实际POST/GET请求。它还应该显示发送的值。然后粘贴结果或另一个屏幕截图
success:function（response）{$（response）.find（“#search_results”）.appendTo（'body'）}
其中#search_results是来自ajax响应的结果，即DIV容器（在post响应返回整个页面时，我们只需要获取这个DIV）。您可以更改.appendTo以将搜索结果放在您喜欢的任何位置，例如：
.insertAfter（$form）
——请记住将
数据类型
更改为
html
，老实说，我仍然不知道该采取什么步骤！