尝试在不离开页面的情况下使用 jquery ajax 发布答案

【问题标题】：trying to post with jquery ajax without leaving the page尝试在不离开页面的情况下使用 jquery ajax 发布
【发布时间】：2013-09-20 05:52:41
【问题描述】：

我正在关注此question 试图发布到 php 页面并让它对数据执行操作，问题是它似乎只是刷新页面而不知道它在做什么。在元素检查器的网络选项卡中，我的 php 页面永远不会出现。这是我的代码：

js:

<script>

$(函数 () { $("#foo").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']);

关于我做错了什么或如何找出我做错了什么的任何想法。

【问题讨论】：

我不确定，但也许您还必须在 ajax 请求中设置 datatype: "json",...

标签： javascript php jquery html ajax

【解决方案1】：

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

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

详细了解为什么和何时使用 DOM-ready 回调here。

【讨论】：

我编辑了我的代码并添加了 $(function () { });围绕一切，但我仍然有相同的结果

【解决方案2】：

我认为您必须将 submit 函数包装在 doc ready 中：

$(function(){

   // here your form submit

});

【讨论】：

【解决方案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/

【讨论】：