使用jQuery进行Ajax请求，您可以通过以下代码实现。

HTML:

    A bar
    
    

JavaScript:

方法1

 /* Get from elements values */
 var values = $(this).serialize();
 $.ajax({
        url: "test.php",
        type: "post",
        data: values ,
        success: function (response) {
           // You will get response from your PHP page (what you echo or print)
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }
    });

方法2

/* Attach a submit handler to the form */
$("#foo").submit(function(event) {
    var ajaxRequest;
    /* Stop form from submitting normally */
    event.preventDefault();
    /* Clear result div*/
    $("#result").html('');
    /* Get from elements values */
    var values = $(this).serialize();
    /* Send the data using post and put the results in a div. */
    /* I am not aborting the previous request, because it's an
       asynchronous request, meaning once it's sent it's out
       there. But in case you want to abort it you can do it
       by abort(). jQuery Ajax methods return an XMLHttpRequest
       object, so you can just use abort(). */
       ajaxRequest= $.ajax({
            url: "test.php",
            type: "post",
            data: values
        });
    /*  Request can be aborted by ajaxRequest.abort() */
    ajaxRequest.done(function (response, textStatus, jqXHR){
         // Show successfully for submit message
         $("#result").html('Submitted successfully');
    });
    /* On failure of request this function will be called  */
    ajaxRequest.fail(function (){
        // Show error
        $("#result").html('There is error while submit');
    });

.success() ， .error() 和 .complete() 回调已被jQuery 1.8弃用。为了为将来的删除做好准备，请改用 .done() ， .fail() 和 .always() 。

MDN：abort()。如果请求已经发送，该方法将中止请求。

所以，我们已经成功发送了Ajax请求，现在是时候从服务器获取数据了。

PHP

由于我们在Ajax调用中进行POST请求（ type：“post”），因此现在可以使用 $ _REQUEST 或 $ _POST 获取数据：

  $bar = $_POST['bar']

您还可以通过以下方式查看POST请求中获取的内容。顺便说一句，请确保 $_POST 已设置。否则，您将收到错误。

var_dump($_POST);
// Or
print_r($_POST);

如果您要将任何数据返回给页面，只需像下面这样回显该数据即可。

// 1. Without JSON
   echo "Hello, this is one"
// 2. By JSON. Then here is where I want to send a value back to the success of the Ajax below
echo json_encode(array('returned_val' => 'yoho'));

然后您可以像下面这样获取它：

 ajaxRequest.done(function (response){
    alert(response);
 });

有一些简写方法可用。您可以使用下面的代码。 它完成相同的工作。

var ajaxRequest= $.post("test.php", values, function(data) {
  alert(data);
})
  .fail(function() {
    alert("error");
  })
  .always(function() {
    alert("finished");
});

.ajax 的基本用法如下：

HTML：

    A bar
    
    

jQuery：

// Variable to hold request
var request;
// Bind to the submit event of our form
$("#foo").submit(function(event){
    // Prevent default posting of form - put here to work in case of errors
    event.preventDefault();
    // Abort any pending request
    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);
    // Let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");
    // Serialize the data in the form
    var serializedData = $form.serialize();
    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);
    // Fire off the request to /form.php
    request = $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData
    });
    // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        // Log a message to the console
        console.log("Hooray, it worked!");
    });
    // Callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // Log the error to the console
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });
    // Callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // Reenable the inputs
        $inputs.prop("disabled", false);
    });
});

注意：自 jQuery 1.8 起，.success()、.error() 和 .complete() 已被弃用，建议使用 .done()、.fail() 和 .always()。

注意：上述片段必须在 DOM 就绪后执行，因此应将其置于 $(document).ready() 处理程序内（或使用简写形式的 $()）。

提示：您可以像这样 链式 使用回调处理程序：$.ajax().done().fail().always();

PHP（即 form.php）：

// You can access the values posted by jQuery.ajax
// through the global variable $_POST, like this:
$bar = isset($_POST['bar']) ? $_POST['bar'] : null;

注意：始终对发布的数据进行消毒处理，以防止注入和其他恶意代码。

您还可以在上述 JavaScript 代码中使用简写 .post 代替 .ajax：

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

注意：上述 JavaScript 代码适用于 jQuery 1.8 及更高版本，但也应该适用于 jQuery 1.5 及更早版本。