带有 PHP 的 jQuery Ajax POST 示例 [英] jQuery Ajax POST example with PHP

问题描述

我正在尝试将数据从表单发送到数据库.这是我使用的表格:

I am trying to send data from a form to a database. Here is the form I am using:

<form name="foo" action="form.php" method="POST" id="foo">
    <label for="bar">A bar</label>
    <input id="bar" name="bar" type="text" value="" />
    <input type="submit" value="Send" />
</form>

典型的方法是提交表单，但这会导致浏览器重定向.使用 jQuery 和 Ajax，是否可以捕获所有表单数据并提交将其转换为 PHP 脚本(例如，form.php)?

The typical approach would be to submit the form, but this causes the browser to redirect. Using jQuery and Ajax, is it possible to capture all of the form's data and submit it to a PHP script (an example, form.php)?

推荐答案

的基本用法.ajax 看起来像这样:

Basic usage of .ajax would look something like this:

HTML:

<form id="foo">
    <label for="bar">A bar</label>
    <input id="bar" name="bar" type="text" value="" />

    <input type="submit" value="Send" />
</form>

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().

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

注意:记住上面的代码片段必须在 DOM 准备好之后完成，所以你应该把它放在一个 $(document).ready() 处理程序(或使用 $() 简写).

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

Tip: You can chain the callback handlers like this: $.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;

注意:始终清理发布的数据，以便防止注入和其他恶意代码.

Note: Always sanitize posted data, to prevent injections and other malicious code.

您也可以在适当的位置使用速记 .post上面JavaScript代码中的.ajax:

You could also use the shorthand .post in place of .ajax in the above JavaScript code:

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

注意:上述 JavaScript 代码适用于 jQuery 1.8 及更高版本，但它应该适用于 jQuery 1.5 之前的版本.

这篇关于带有 PHP 的 jQuery Ajax POST 示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！