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

我不知道为什么我没有得到它。 无论哪种方式,这让我感到沮丧。 我查看了2个jquery书籍,网络教程和堆栈溢出post,我仍然不明白。

我正在尝试构建一个搜索filter栏,用户可以在其中选择filter,点击“精简结果”后,它会修改查询输出。

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

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

我老实地看了很多不同的答案,但所有人都认为读者比我更了解javascript / jquery的基本知识。

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

假设我是一个完整的jQuery / ajax noob,有人可以解释一下吗?

您只需在单击提交按钮时将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是提交表单的URL
  6. " +.content"仅用于从响应中提取结果部分,而不是整个html页面
  7. $(this).serialize()将表单字段数据传递给ajax请求
  8. 最后,在显示结果后调用最后一个匿名函数,并可用于触发一些表示结果已更新的视觉效果