jQuery Ajax POST example - submit all form's data

demo

Basic usage of .ajax would look something like this:
HTML:

1. <form id="foo">
   
2. 
   
3. <label for="bar">A bar</label>
   
4. <input id="bar" name="bar" type="text" value="" />
   
5. 
   
6. <input type="submit" value="Send" />
   
7. 
   
8. </form>

复制代码

JavaScript:

1. // variable to hold request
   
2. var request;
   
3. // bind to the submit event of our form
   
4. $("#foo").submit(function(event){
   
5. // abort any pending request
   
6. if (request) {
   
7. request.abort();
   
8. }
   
9. // setup some local variables
   
10. var $form = $(this);
    
11. // let's select and cache all the fields
    
12. var $inputs = $form.find("input, select, button, textarea");
    
13. // serialize the data in the form
    
14. var serializedData = $form.serialize();
    
15. 
    
16. // let's disable the inputs for the duration of the ajax request
    
17. $inputs.prop("disabled", true);
    
18. 
    
19. // fire off the request to /form.php
    
20. request = $.ajax({
    
21. url: "/form.php",
    
22. type: "post",
    
23. data: serializedData
    
24. });
    
25. 
    
26. // callback handler that will be called on success
    
27. request.done(function (response, textStatus, jqXHR){
    
28. // log a message to the console
    
29. console.log("Hooray, it worked!");
    
30. });
    
31. 
    
32. // callback handler that will be called on failure
    
33. request.fail(function (jqXHR, textStatus, errorThrown){
    
34. // log the error to the console
    
35. console.error(
    
36. "The following error occured: "+
    
37. textStatus, errorThrown
    
38. );
    
39. });
    
40. 
    
41. // callback handler that will be called regardless
    
42. // if the request failed or succeeded
    
43. request.always(function () {
    
44. // reenable the inputs
    
45. $inputs.prop("disabled", false);
    
46. });
    
47. 
    
48. // prevent default posting of form
    
49. event.preventDefault();
    
50. });

复制代码

Note: Since jQuery 1.8, .success, .error and .complete are deprecated in favor of .done, .fail and .always.
PHP (i.e. form.php):

1. // you can access the values posted by jQuery.ajax
   
2. // through the global variable $_POST, like this:
   
3. $bar = $_POST['bar'];

复制代码

Note: Always sanitize posted data, to prevent injections and other malicious code.
You could also use the shorthand .post in place of .ajax in the above JavaScript code:

1. $.post('/form.php', serializedData, function(response) {
   
2. // log the response to the console
   
3. console.log("Response: "+response);
   
4. });

复制代码

Note: The above JavaScript is made to work with jQuery 1.8 but should work with previous versions down to jQuery 1.5.

Marcus Ekwall

demo

You can also do this by:
HTML:

1. <form id="foo">
   
2. <label for="bar">A bar</label>
   
3. <input id="bar" name="bar" type="text" value="" />
   
4. <input type="submit" value="Send" />
   
5. </form>
   
6. 
   
7. <!-- The result of the search will be rendered inside this div -->
   
8. <div id="result"></div>

复制代码

Script

1. /* Attach a submit handler to the form */
   
2. $("#foo").submit(function(event) {
   
3. 
   
4. /* Stop form from submitting normally */
   
5. event.preventDefault();
   
6. 
   
7. /* Clear result div*/
   
8. $("#result").html('');
   
9. 
   
10. /* Get some values from elements on the page: */
    
11. var values = $(this).serialize();
    
12. 
    
13. /* Send the data using post and put the results in a div */
    
14. $.ajax({
    
15. url: "test.php",
    
16. type: "post",
    
17. data: values,
    
18. success: function(){
    
19. alert("success");
    
20. $("#result").html('Submitted successfully');
    
21. },
    
22. error:function(){
    
23. alert("failure");
    
24. $("#result").html('There is error while submit');
    
25. }
    
26. });
    
27. });

复制代码

Now you can get data in php

1. $bar = $_post['bar']

复制代码

Now some additional thing

---

• Return data in Ajax call
  

You can either just simply echo it, or (better still as it allows multiple values to be returned and is handled negatively by JavaScript) use JSON.

1. $id = $_POST['bar'];
   
2. //Code that would run here for whatever
   
3. 
   
4. // 1. Without JSON
   
5. echo "hello this is one"
   
6. 
   
7. // 2. By JSON. Then here is where I want to send a value back to the success of the Ajax below
   
8. echo json_encode(array('returned_val' => 'yoho'));

复制代码

And then in the success function you can get

1. success: function(data) {
   
2. alert(data.returned_val);
   
3. }

复制代码

stackoverflow