使用 jQuery 的 AJAX - 语法错误？

Question

以下是包含对负责发出 AJAX 调用的 JavaScript 函数的调用的 HTML。我知道锚标签不应该具有 value 属性，但我将它与 jQuery 的 .attr("value") 方法一起使用。

<a href="javascript:;" onclick="ajaxTest();" title="Execute AJAX" value="executeAJAX">Execute AJAX</a>

以下是 JavaScript 函数。如果它有任何意义，它本身就包含在一个 .js 文件中。

function ajaxTest() {
    $.ajax({
        type: "POST",
        url: "doAJAX",
        data: {"selectedScope": "5",
               "selectedView": "6"},
        dataType: "text",
        success: function(responseData) {
            $("#replaceThis").append(responseData);
        }
    });
}

每次单击链接时，Firefox 的 Web 控制台中都会出现“语法错误”消息。然而，JavaScript 似乎按预期工作。

我只是想了解我收到错误的原因。

我应该补充一点，我使用的是 jQuery 1.7.1。

我进行了搜索，发现唯一的解决方法是“数据”选项的键应该用双引号括起来，所以我已经实现了，但我仍然得到语法。

谢谢。

编辑：

查看 Firebug 控制台，上面的代码不会触发 像在 Firefox 的控制台中一样的错误，但是，我看到了以下内容 在 POST 请求的 XML 部分：

XML 解析错误：语法错误位置： moz-nullprincipal:{1d13df07-25fb-4058-9f82-ce1bef3c8949} 行号 1、第1栏：
alskdfjlaksjdfjasdfl
^

“alskdfjlaksjdfjasdfl”只是我设置的 servlet 在我测试这些东西时返回的内容。

这有点奇怪，因为 jQuery 似乎在尝试解析 尽管我已经明确声明它是文本，但作为 XML 的响应。

Answer 1

我最近遇到了同样的问题。 jQuery 似乎正确地处理了数据和 dataType，但实际上是 Firefox 返回了语法错误，这解释了为什么您的代码按预期执行但仍然向控制台打印错误。

如果您查看开发者控制台，您可以看到 Firefox 正在将纯文本数据解释为另一种格式（可能是 XML）。 Firefox 厌倦了将数据解析为 XML，但不能，因为它不是有效的 XML，导致“语法错误”被打印到控制台。

对我来说，解决这个问题的方法是编辑服务器，使其返回以下标头：

Content-Type: "text/plain"

这似乎只是 Firefox 的问题，Chrome 没有遇到此问题。有一个Firefox bug here 似乎涉及到这个问题。

Answer 2

function ajaxTest() {
    $.ajax({
        type: "POST",
        url: "doAJAX",
        data: {"selectedScope": "5",
               "selectedView": "6"          <---- here (drop comma, add bracket)
               },
        dataType: "text",
        success: function(responseData) {
            $("#replaceThis").append(responseData);
        }
    });
}

Answer 3

function ajaxTest() {
    $.ajax({
        type: "POST",
        url: "doAJAX",
        data: {
            "selectedScope": "5",
            "selectedView": "6"
        }, // <-- need closing curly brace and comma
        dataType: "text",
        success: function(responseData) {
            $("#replaceThis").append(responseData);
        }
    });
}

编辑

我得到了它的工作here on jsFiddle。

另外，尝试改变

<a href="javascript:;" ... 

到

<a href="javascript:void();"...`

编辑 2

我也得到了另一种方法。 （使用 Firefox 8.0.1 和 Jquery 1.7.1）

See it in action here.

Answer 4

问题出在您的数据对象上，您缺少尾随 }

编辑：

不确定是否是问题所在，但我认为您可以跳过数据对象中键周围的引号（如果您只想发送数字，也可以跳过值，如果您打算发送字符串，请保留它们实例）：

编辑 2：

根据jQuery documentation，.append() 需要一个 DOM 元素、HTML 字符串或 jQuery 对象。因此，我为您的响应创建了一个 DOM 文本节点，并附加它而不仅仅是文本字符串。请注意，该修改未经测试。

function ajaxTest() {
    $.ajax({
        type: "POST",
        url: "doAJAX",
        data: {
           selectedScope: 5,
           selectedView: 6
        },
        dataType: "text",
        success: function(responseData) {
            $("#replaceThis").append(document.createTextNode(responseData));
        }
    });
}

Answer 5

那是因为您忘记在data 参数上添加}。试试这个：

function ajaxTest() {
    $.ajax({
        type: "POST",
        url: "doAJAX",
        data: {"selectedScope": "5",
               "selectedView": "6"},
        dataType: "text",
        success: function(responseData) {
            $("#replaceThis").append(responseData);
        }
    });
}

一个建议：当您遇到此类问题时。使用Google Closure Compiler Service。它会准确地告诉你问题出在哪里。或者 Firebug，如果你使用 Firefox。

Answer 6

function ajaxTest() {
    $.ajax({
        type: "POST",
        url: "doAJAX",
        dataType: "html",
        data:{
               "selectedScope": "5",
               "selectedView": "6"
         },
        success: function(responseData) {
            $("#replaceThis").append(responseData);
        }
    });
}