尝试使用jquery ajax发布而不离开页面

时间:2013-09-20 05:52:41

标签: javascript php jquery html ajax

我跟着这个question尝试发布到php页面并让它对数据执行操作问题是它似乎只是刷新页面而不确定它在做什么。在元素检查器的网络选项卡中,我的php页面永远不会出现。 这是我的代码:

JS:

<script>

$(function(){     $( “#富”)。提交(函数(事件){  //变量来保存请求     var请求;     //绑定到表单的提交事件

// 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
$inputs.prop("disabled", true);

// fire off the request to /form.php
request = $.ajax({
    url: "/DormDumpster/session/login-exec.php",
    type: "post",
    data: json
});

// 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!");
    alert("hello");
});

// 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 occured: "+
        textStatus, errorThrown
    );
            alert("bye");

});

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

}); });

HTML:

        <form id = "foo" method="post" >
            <fieldset id="inputs">
                <input id="email" type="email" name="login" placeholder="Your email address" required>   <br>
                <input id="password" type="password" name="password" placeholder="Password" required>
            </fieldset>
            <fieldset id="actions"">
                <input type="submit" id="submit" name "Submit" value="Log in"">
                <label><input type="checkbox" checked="checked"> Keep me signed in</label>
            </fieldset>
        </form>

PHP

    $email = clean($_POST['login']);
    $password = clean($_POST['password']);

任何关于我做错事的想法或如何弄清楚我做错了什么。

3 个答案:

答案 0 :(得分:3)

您可能尝试在表单在DOM中可用之前附加事件侦听器 - 因此将找不到您的表单,并且不会附加事件侦听器。尝试将代码包装在一个支持DOM的回调函数中,以确保您的表单在尝试选择它之前在DOM中。

$(function () {
    $("#foo").submit(function(event){
         // All your code...
    });
});

更多关于为什么何时使用支持DOM的回调here

答案 1 :(得分:1)

我认为您必须将submit功能包含在doc ready

$(function(){

   // here your form submit

});

答案 2 :(得分:0)

最好记下您作为参数传递的参数,并检查它在该函数或属性中是否有效。

$(function(ready) {
     $.ajax({
          type: "POST",
          url: "/DormDumpster/session/login-exec.php",
          data: { name: "John", location: "Boston" },
          dataType: "JSON"
     })
}
  

要发送到服务器的数据。它被转换为查询字符串if   还不是一个字符串。它附加到GET请求的URL。    - 来自http://api.jquery.com/jQuery.ajax/