使用PHP的jQuery Ajax POST示例

原创 287865  2019-07-10 20:46 

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

   <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 )?

[


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

的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() 处理程序中(或使用 [ 123] 简写。 $() 提示:你可以

链接

这样的回调处理程序: [ 123 $.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;
 注:始终清理发布的数据

,以防止注射和其他恶意代码。

你也可以用速记

代替 .post 在上面的javascript代码中: .ajax

   $.post('/form.php', serializeddata, function(response) {
    // log the response to the console
    console.log("response: "+response);
});
  注意:上面的javascript代码与jquery一起使用1.8及更高版本,但它应该与以前的版本一起使用到jquery 1.5。

本文地址:https://www.hedasudi.com/2825.shtml
版权声明:本文为原创文章,版权归 287865 所有,欢迎分享本文,转载请保留出处!

发表评论


表情