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

Question

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

JS：

<script>

$（function（）{$（“＃foo”）。submit（function（event）{//用于保存请求var请求的变量; //绑定到表单的submit事件

// 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']);

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

Answer 1

您可能尝试在表单在DOM中可用之前附加事件侦听器 - 因此将找不到您的表单，并且不会附加事件侦听器。 尝试将代码包装在DOM-ready回调中，以确保在尝试选择表单之前，表单位于DOM中。

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

有关何时以及何时在此处使用DOM-ready回调的更多信息 。

Answer 2

我认为你必须将你的submit功能包装在doc ready ：

$(function(){

   // here your form submit

});

Answer 3

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

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

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