JQuery中的AJAX调用出现错误

AJAX call in JQuery giving an error

本文关键字：错误 调用 中的 AJAX JQuery      更新时间：2023-09-26

我正在附加我正在执行的项目，但它总是转到错误函数。

它为什么要这么做？

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="jquery-ui.css">
    <script src="jquery-1.10.2.js"></script>
    <script src="jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
      $(function() {
          $("#tags").autocomplete({
              source: function (request, response) {
                  $.ajax({
                      url: "test",
                      dataType: "json",
                      success: function(response) {
                          alert("a");
                          console.log(response);
                      },
                      error: function(response) {
                        alert("b");
                          console.log(response);
                      }
                  });
              }
          });
      });
    </script>
  </head>
  <body>
    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags">
    </div>
  </body>
</html>

我的JSON文件名为test.json，包含：

[{"SubItemID":1,"MainItemID":1,"SubName":"2%","MainName":"Milk"},
{"SubItemID":2,"MainItemID":1,"SubName":"Skim/Fat Free","MainName":"Milk"},
{"SubItemID":3,"MainItemID":2,"SubName":"Chedder","MainName":"Cheese"}]

Url应该是"test.json"，因为您得到的是静态文件。您没有将请求发送到有效的服务器URL。

它必须是你试图从url中获取的实际文件：测试不会给你任何回报，除非在后端你有一些机制可以给你一个JSON响应，dataType:JSON

url中的文件可以是任何内容。something.json或test.php、test.asp、test.jsp，无论情况如何，都需要指定一个具有实际json 的文件

回答得好Birgit Martinelle。那将是我的第一直觉。

您可以对后端API进行AJAX调用，它需要返回JSONP格式，而不仅仅是JSON，否则会出错。这是由于同源政策：https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy.

此讨论可能有助于理解JSONP:

有人能用外行的话解释什么是JSONP吗？

然而，一个替代方案是禁用谷歌Chrome浏览器的安全性，然后它就会工作。但这不是一个解决方案。您需要使用JSONP格式。

所以最好让你的JSon文件像这样，即JSonP格式的

myCallback([{"SubItemID":1,"MainItemID":1,"SubName":"2%","MainName":"Milk"},
{"SubItemID":2,"MainItemID":1,"SubName":"Skim/Fat Free","MainName":"Milk"},
{"SubItemID":3,"MainItemID":2,"SubName":"Chedder","MainName":"Cheese"}]);

希望这能帮助您解决问题

相关文章：