Jquery ajax POST实例

Marcus Ekwall


    POST可以用.ajax,.ajax基本用法像这样:

    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:

 

// 变量来保存请求
var request;
// 绑定到我们的表单提交事件
$("#foo").submit(function(event){
    // 中止任何挂起的请求
    if (request) {
        request.abort();
    }
    //设置一些局部变量
    var $form = $(this);
    //让我们来选择,并缓存所有的字段
    var $inputs = $form.find("input, select, button, textarea");
    //序列化表单中的数据
    var serializedData = $form.serialize();

    //在ajax的请求期间让我们禁用 inputs 
    //注:我们禁用元素后的表单数据已序列化。
    // 禁用表单元素不会被序列化.
    $inputs.prop("disabled", true);

    //记录rq到 /form.php
    request = $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData
    });

    // 回调处理程序将被调用成功
    request.done(function (response, textStatus, jqXHR){
        // 记录一个信息到控制台
        console.log("Hooray, it worked!");
    });

    // 回调处理程序将被调用失败
    request.fail(function (jqXHR, textStatus, errorThrown){
        // 记录一个错误信息到控制台
        console.error(
            "The following error occured: "+
            textStatus, errorThrown
        );
    });

    // 回调处理程序将调用被忽略的
    // 如果请求失败或成功
    request.always(function () {
        // 重新启用inputs
        $inputs.prop("disabled", false);
    });

    // 防止form调用默认的POST
    event.preventDefault();
});
 

    注:由于jQuery的1.8,success, .error和 .complete 被认为是已过时,用.done, .fail 和 .always代替。
    注意:请记住,上面的代码段应该在所有的DOM加载完后起作用,所以你应该把它处理程序放在$(document).ready()内(或使用$()的简写)。
    提示:您可以这样链回调处理程序:$.ajax().done().fail().always();

    PHP (例如 form.php):

// 您可以访问jQuery.ajax提交过来的值
// 通过全局变量$ _POST,像这样:
$bar = $_POST['bar'];

注意:请务必对提交的数据进行处理,以防止注入和其他恶意代码。

您也可以用下面的代码提交,ajax的简化版本:


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

注:以上的JavaScript可以在jQuery 1.8下工作,但更适合以前的版本的Jquery,如1.5。

京ICP备14008139号-1