JavaScript JQuery Ajax 问题 : POST Works fine in Firefox, IE、Safari 但不是 Chrome

Question

我是 JavaScript 的新手，正在与一些开发人员一起从事一个业余爱好项目。我们有一个简单的页面，用于向数据库提交请求。

我决定尝试学习 JQuery，并开始在这个请求页面中实现一些 AJAX 功能。它在 FireFox、IE 和 Safari 中运行良好，但由于某些奇怪的原因，我无法在 Chrome 中运行它。

我已经调试了几个小时了，我不知道为什么它不工作。这是 HTML 表单的相关部分(由于 JavaScript 而删除了后操作):

        <form method="POST">
            <input type="text" name="amount" value="0" size="7" />
            <input type="submit" value="Fulfill!" /><br />
            <input type="hidden" name="index" value="69" />
            <input type="hidden" name="item" value="Iron Ore" />
        </form>

这是它发布到的 PHP 表单:

<?php
require_once("../classes/Database.php");
$database = new Database();

$amount = $database->sanitizeString($_POST['amount']);
$index = $database->sanitizeString($_POST['index']);
$username = $database->sanitizeString($_POST['username']);
$item =  $database->sanitizeString($_POST['item']);
$database->connect();
$database->setRequest($amount, $index, $username, $item);
$database->setKarma($username, $amount, $item);
?>

最重要的是，这是我在 HTML 文件中的新手 JavaScript 代码:

<script language="JavaScript">
    var amount = 0;
    var index = 0;
    var item = 0;
    var username = "";
    var data = "";
    $(document).ready(function(){
        $("form input[type=submit]").click(function(){
            amount = $(this).siblings("input[name=amount]").val();
            index = $(this).siblings("input[name=index]").val();
            item = $(this).siblings("input[name=item]").val();
            username = "<?=$_SESSION['username']; ?>";
            //var stuff = $.post("pages/ajaxfulfill.php", {amount:amount,index:index,item:item, username:username}, function(data){alert(data)}, "html");
            var stuff = $.ajax(
                                    {
                                        url: "pages/ajaxfulfill.php",
                                        type: "POST", data:"amount=" + amount + "&index=" + index + "&item=" + item + "&username=" + username,
                                        success: function(data)
                                        {
                                            alert("Success")
                                        },
                                        error: function (XMLHttpRequest, textStatus, errorThrown)
                                        {
                                            alert("error" + XMLHttpRequest.status);
                                            alert("error" + XMLHttpRequest.responseText);
                                        }
                                    }
                               )
            $(this).parents("td").text("Submitted");

        });

    });

</script>

起初，我使用的是注释掉的 $.post 函数，它适用于上述浏览器。我在调试过程中尝试切换到 $.ajax 函数，发现 FF、IE 和 Safari 总是返回“成功”警报，而 Chrome 返回状态为 0 的错误和空白响应。

作为一个 JavaScript 新手，我完全不知道为什么会失败。如果有人能指出我正确的方向，我将向你致以深深的敬意和良好的祝愿。谢谢。

Answer 1

您似乎没有阻止提交按钮上的默认操作。因此，在您的点击功能触发后，表单仍会提交，可能会取消您的 XMLHttpRequest。

(这里跨浏览器可能有所不同的是，在函数的末尾，您通过调用 text() 函数从页面中删除表单。是否应该停止提交表单？不知道.. . 一些浏览器可能，但没有规范这样说。)

使用 event.preventDefault();关于传递给处理程序的参数 function(event) { ... }停止单击按钮以提交表单。

但不要将表单提交代码绑定(bind)到输入按钮。您的脚本可能(取决于浏览器和表单的其他属性)无法触发另一种提交，例如 Enter 键。始终使用 submit 绑定(bind)验证和 AJAX 表单替换form 上的事件本身。 event.preventDefault();仍然适用。

省略 action <form> 的属性是无效的;浏览器通常选择现有页面的 URL 来提交。如果您想要提交没有表单的表单字段(并且您不需要 radio 输入)，只需省略 <form>元素。但实际上你应该使用渐进式增强:首先使用适当的 method="POST" action="ajaxfulfill.php" 使表单从纯 HTML 工作。 ，然后然后在此基础上构建一个简单的 AJAX 函数。

username = "<?=$_SESSION['username']; ?>";

脚本注入(inject)。相反:

username= <?= json_encode($_SESSION['username'], JSON_HEX_TAG); ?>

和:

data:"amount=" + amount + "&index=" + index + "&item=" + item + "&username=" + username,

您需要使用 encodeURIComponent(...)超过 URL 编码表单提交中的每个值，否则特殊字符会破坏它。最好让 jQuery 为你做这件事:

data: {amount: amount, index: index, item: item, username: username},

或者更简单，放弃对 field.val() 的所有手动阅读并且只使用现有的 serialize为您完成这一切的功能:

data: $(this).serialize(),

(假设 this 现在是 form 你正在处理 onsubmit 为...如果它是提交按钮，你必须说 $(this.form) 。)

您真的要从用户提交的 POST 数据中获取用户名吗？他们可能已经更改了这些数据？除非用户名是故意不安全的，否则从它来自的 session 中获取它似乎是一个更好的主意。