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

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

<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) { ... }以停止点击按钮以提交表单。

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

省略action的{{1}}属性无效;浏览器通常会选择要提交的现有页面的URL。如果您想要没有表单的表单字段提交（并且您不需要无线电输入），只需省略<form>元素即可。但实际上你应该使用渐进式增强功能：首先使用普通的HTML，使用正确的<form>，然后然后构建一个简单的AJAX函数。

method="POST" action="ajaxfulfill.php"

脚本注入。代替：

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

和

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

您需要对URL编码表单提交中的每个值使用data:"amount=" + amount + "&index=" + index + "&item=" + item + "&username=" + username,，否则特殊字符会破坏它。最好让jQuery为你做这件事：

encodeURIComponent(...)

甚至更简单，放弃data: {amount: amount, index: index, item: item, username: username},的所有手动阅读，只需使用现有的serialize功能为您完成所有操作：

field.val()

（假设data: $(this).serialize(),现在是您处理this的{{1}} ...如果是提交按钮，则必须说form。）

您真的想从用户提交的POST数据中获取用户名吗？除非用户名是故意无安全的，否则从会话中获取它会更好。

Answer 2

您需要做的第一件事是隔离问题。 Chrome v4.0.249.27（至少在OS X上）附带了您可能觉得有用的开发人员工具。点击该按钮，查看Chrome正在执行的操作。您可能还想在开发人员工具的“脚本”选项卡中将“.ajax”添加到“监视表达式”列表中。

可以通过查看»开发人员»开发人员工具找到开发人员工具。

Answer 3

您可以自己做一些事情来诊断：

Chrome中的Shift + Ctrl + J可启动Javascript控制台并启用调试功能。坚持断点并逐步完成您的功能
观看Javascript错误/警告控制台（即使在其他浏览器中）

Answer 4

我意识到这是一个旧帖子，但我在我的项目中遇到了类似的症状，并最终在这里寻找解决方案。

我遵循了一些关于调试的建议，并意识到Chrome不会像其他浏览器一样更新。我在js代码中做出的更改，css在Safari和Firefox中立即更新，并且正常刷新，但Chrome在更新相同项目之前需要清除硬重载和缓存。

我并不是说这可以解决上面提到的所有问题，但它解决了我的问题。

JavaScript JQuery Ajax问题：POST在Firefox，IE，Safari中运行良好，但不适用于Chrome

4 个答案: