jQuery的阿贾克斯POST例如用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和阿贾克斯，是有可能捕捉到所有形式的数据，并将其提交到一个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 (in example, form.php)?

答

阿贾克斯 会是这个样子：

HTML：

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

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

JavaScript的：

// Variable to hold request
var request;

// Bind to the submit event of our form
$("#foo").submit(function(event){

    // 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);
    });

    // Prevent default posting of form
    event.preventDefault();
});

注：由于jQuery的1.8，.success，.error和.complete都去precated赞成.done，.fail和。总是的

注意：请记住，上述片段中后DOM准备工作要做，所以你应该把它放在一个 $（文件）。就绪（） 处理程序（或使用 $（）的简写）。的

Note: Remember that the above snippet has to be done after DOM ready, so you should put it inside a $(document).ready() handler (or use the $() shorthand).

提示：您可以链回调处理程序。像这样的： $阿贾克斯（）（）完成的失败（）总是（）; 的

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 = $_POST['bar'];

注：始终的sanitize发布的数据的，以prevent注射和其他恶意code 的

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

您也可以使用简写 。员额 在地方阿贾克斯在上面的JavaScript code：

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 code是用jQuery的1.8和以后的工作，但它应该与previous版本一起下来的jQuery 1.5 的

jQuery的阿贾克斯POST例如用PHP

相关推荐