3

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

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

我已经调试了几个小时了，我不知道为什么它不起作用。这是 HTML 表单的相关部分（由于 JavaScript 删除了 post 操作）：

        <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 新手，我完全不知道为什么会失败。如果有人能指出我正确的方向，你会得到我深深的尊重和良好的祝愿。谢谢。

4

4 回答 4

4

您似乎没有阻止提交按钮上的默认操作。所以在你的点击函数触发后，表单仍然提交，大概取消了你的 XMLHttpRequest。

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

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

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

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

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

脚本注入。反而：

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()只需使用现有的序列化功能即可完成所有工作：

data: $(this).serialize(),

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

您是否真的想从用户提交的 POST 数据中获取用户名，他们可能已经更改了？除非用户名是故意不安全的，否则从它出现的会话中获取它似乎是一个更好的主意。

于 2009-12-08T03:34:11.080 回答
2

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

开发者工具可以通过View » Developer » Developer Tools找到。

于 2009-12-08T02:16:08.803 回答
1

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

  1. Chrome 中的 Shift + Ctrl + J 启动 Javascript 控制台并启用调试。坚持断点并逐步执行您的功能
  2. 观看 Javascript 错误/警告控制台（即使在您的其他浏览器中）
于 2009-12-08T02:20:05.690 回答
0

我意识到这是一篇旧帖子，但我的项目中刚刚出现了类似的症状，最终在这里试图找到解决方案。

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

我并不是说这是解决上述所有问题的方法，但它解决了我的问题。

于 2017-07-05T10:54:01.927 回答