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

问题描述

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

I'm not sure why I'm not getting it. Either way this is frustrating me beyond belief. I've looked through 2 jquery books, web tutorials, and stack overflow posts and i still dont understand.

我正在尝试构建一个搜索过滤器栏，用户可以在其中选择过滤器，点击精炼结果后，它会修改查询输出。

I am trying to build a search filter bar where a user can select filters and upon clicking "refine result" it modifies the query output.

如何使用jquery / ajax将用户选择的任何形式单选框的值提交给a php页面将显示取决于输入的结果，而不刷新页面。

How do I submit the value of whichever form radio box the user selects using jquery/ajax to a php page which will display results dependent upon the input, without page refresh.

1. 表格 - >


2. 用户选择单选按钮值并单击提交 - >


3. 表单数据通过jquery / ajax发送到.php页面，其输出将在没有页面刷新的情况下显示 - >


4. .php文件处理用户输入并根据它创建输出

1. Form-->
2. user selects radio button value and clicks submit-->
3. form data gets sent via jquery/ajax to the .php page whose output is to be displayed in without page refresh-->
4. .php file processes the user input and creates output based on it

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

I've honestly looked through alot of different answers but all of them assume that the reader has a greater basic knowledge of javascript/jquery than I do.

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

Like, do I have to put the jQuery/ajax in a function that runs "onclick" of my submit button? Or do I just add a .click event handler for my button id?

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

Can someone explain it all to me assuming I'm a complete jQuery/ajax noob?

推荐答案

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

You just have to attach your ajax call to the "submit" event that comes from the form when the submit button is clicked :

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

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

I assumed your results are displayed in an element that has the "content" class.

1. $（'form'）选择您的表格，您可以将其个性化


2. .submit 将一个事件处理程序附加到表单submit event


3. e。 preventDefault（）和 return false 阻止表单实际提交


4. $（'。content'）。load 将使用带有ajax调用结果的content类填充元素


5. this.action 是提交表单的网址


6. + .content此处仅提取表格结果部分来自响应，而不是整个html页面


7. $（this）.serialize（）将表单字段数据传递给ajax请求


8. 最后在显示结果后调用最后一个匿名函数，可以用来触发一些表明结果的视觉效果已更新

1. $('form') selects your form, you can personalize it
2. .submit attach an event handler to the form "submit event
3. e.preventDefault() and return false prevents the form to be actually submitted
4. $('.content').load will fill the element with "content" class with the ajax call results
5. this.action is the URL to submit the form to
6. " +.content" is here to extract only the result part from the response, instead of the entire html page
7. $(this).serialize() passes the form fields data to the ajax request
8. finally the last anonymous function is called after the results are displayed and can be used to trigger some visual effect indicating that the results were updated

这篇关于如何使用jquery-ajax提交表单数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！