获取 jQuery AJAX 成功选项以返回值的基本问题

Posted 2023-05-08

技术标签:

【中文标题】获取 jQuery AJAX 成功选项以返回值的基本问题【英文标题】：Basic Trouble getting jQuery AJAX success option to return value 【发布时间】：2016-05-11 11:12:44 【问题描述】：

我第一次使用带有 jquery 的 json 并且需要检索一个 json 文件。即使使用此脚本，我也无法检索 json 文件。我从来没有到达 alert("I'm in success function"); 行。这是我正在使用的脚本：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
        <!-- jQuery CDN -->
         <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> 

        <!-- Latest compiled and minified CSS -->
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/readable/bootstrap.min.css">

    <title>Quiz App</title>
       </head>

  <script>
 $(document).ready(function() 
     alert("I'm in doc_ready");
 // jQuery AJAX request to read JSON formatted Test Questions & Answers from file
 $.ajax(
    url: "test.json",
    dataType: "json",
    success: function(result) 
      alert("I'm in success function");
      alert(result);
   
  );
 );
 </script>

<h3>Test for fetching JSON file from server</h3>

当我在 ajax 调用中设置断点时，我会打印出第一个警报。但是成功的没有。我从在萤火虫中通过它看到它完全跳过了成功选项。我不知道为什么。没有抛出异常，我从 http 响应正文中看到：

[
    question: ["Who is Prime Minister of the United Kingdom?", "Who is the Vice-President of the United
 States?", "Who is Chancellor of Germany?", "Who is the Prime Minister of Canada?"],
    choices: [
      ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
      ["Barack Obama", "Bernie Sanders", "Nancy Pelosi", "Joe Biden"],
      ["Franz Ritz", "Angela Merkel", "Jan Schroeder", "John Stevens", "Karl Marx"],
      ["Wayne Gretsky", "Pierre Trudeau", "Mike Myers", "Justin Trudeau", "Justin Bieber"]
    ],
    correctAnswer: [0, 3, 1, 3]
  ]

服务器正在做它的工作。任何意见都非常感谢。

更新：现在我在警报（结果）上收到 [object Object]，因为我通过 JSON Generator 站点放置了 json 文件。

当我将我的 json 放入 JSON 生成器时，我得到了这个在 JSLint 上验证正常：

[
    "question": [
        "Who is Prime Minister of the United Kingdom?",
        "Who is the Vice-President of the United States?",
        "Who is Chancellor of Germany?",
        "Who is the Prime Minister of Canada?"
    ],
    "choices": [
        [
            "David Cameron",
            "Gordon Brown",
            "Winston Churchill",
            "Tony Blair"
        ],
        [
            "Barack Obama",
            "Bernie Sanders",
            "Nancy Pelosi",
            "Joe Biden"
        ],
        [
            "Franz Ritz",
            "Angela Merkel",
            "Jan Schroeder",
            "John Stevens",
            "Karl Marx"
        ],
        [
            "Wayne Gretsky",
            "Pierre Trudeau",
            "Mike Myers",
            "Justin Trudeau",
            "Justin Bieber"
        ]
    ],
    "correctAnswer": [
        0,
        3,
        1,
        3
    ]
]

更新二：这是纠正 json 格式问题后的 jQuery 代码

var allQuestions = null;

 // jQuery AJAX request to read JSON formatted Test Questions & Answers from file
     $.ajax(
        url: "test.json",
        dataType: "json",
        success: function(result) 
          allQuestions = result;
        
      )

真正的“少写，多做”是正确的。

【问题讨论】：

看来你的json无效....在本站查看：jsonlint.com 您还没有输入数据？在您的 ajax 中添加数据：，使用您的对象。为什么要复制问题中的 JSON？一个来自响应，一个来自我的 json 文件。我以为你可能需要它。我知道它是相同的。我只是对你为什么说正确的 json 感到困惑。从文档中我认为 json 文件格式正确。 【参考方案1】：

您的数据不是 JSON。必须引用属性名称。使用complete 处理程序，无论调用的结果是什么，该处理程序都会被调用，以找出正在发生的事情。

$.ajax(
    url: "test.json",
    dataType: "json",
    complete: function(jqXhr, status) 
        // Status will be "parsererror"
        alert("I'm in complete function: " + status);
    
);

您的 JSON 应如下所示。注意"question"、"choices" 和"correctAnswer" 周围的双引号

[
    "question": ["Who is Prime Minister of the United Kingdom?", "Who is the Vice-President of the United
 States?", "Who is Chancellor of Germany?", "Who is the Prime Minister of Canada?"],
    "choices": [
      ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
      ["Barack Obama", "Bernie Sanders", "Nancy Pelosi", "Joe Biden"],
      ["Franz Ritz", "Angela Merkel", "Jan Schroeder", "John Stevens", "Karl Marx"],
      ["Wayne Gretsky", "Pierre Trudeau", "Mike Myers", "Justin Trudeau", "Justin Bieber"]
    ],
    "correctAnswer": [0, 3, 1, 3]
]

【讨论】：

好的，我得到“我的功能完整：解析器错误”。我该怎么做才能将响应的内容分配给脚本其余部分所需的全局变量。？是jqXhr吗？ @alan 你不能只修复 JSON 吗？你可以使用var data = eval('(' +jqXhr.responseText + ')' )，但那将是一个hack。解决根本问题，不要打补丁。对不起，我不明白你的意思。为什么我的文件不是 json？当它被嵌入并且工作正常时，我直接从我的脚本中复制了它。我错过了一些东西。我的 test.json 文件不正确。我用 test.json 的内容更新问题。感谢您的耐心等待。荣誉 Juan 一旦我得到了 json 文件，它就像一个魅力。因此，如果 json 文件的格式不正确，它不会引发异常，您只需验证您的 json？当我决定将 json 拆分为单独的文件时，脚本中的格式不同？【参考方案2】：

实际上，您的 JSON 中有一个无效字符，这归因于问题数组中有一个断线。

在此处查看您的代码的工作示例，您只需要 JSON 看起来像我的数据变量。

var data = [
    question: ["Who is Prime Minister of the United Kingdom?", "Who is the Vice-President of the United States?", "Who is Chancellor of Germany?", "Who is the Prime Minister of Canada?"],
    choices: [
      ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
      ["Barack Obama", "Bernie Sanders", "Nancy Pelosi", "Joe Biden"],
      ["Franz Ritz", "Angela Merkel", "Jan Schroeder", "John Stevens", "Karl Marx"],
      ["Wayne Gretsky", "Pierre Trudeau", "Mike Myers", "Justin Trudeau", "Justin Bieber"]
    ],
    correctAnswer: [0, 3, 1, 3]
  ];

   $.ajax(
    data: data,
    dataType: "json",
    success: function(result) 
      alert("I'm in success function");
      alert(result);
   
  );

https://jsfiddle.net/wmxw9nnh/1/

【讨论】：

以上是关于获取 jQuery AJAX 成功选项以返回值的基本问题的主要内容，如果未能解决你的问题，请参考以下文章

用jquery的ajax方法获取不到return返回值

jQuery中ajax的4种常用请求方式

jquery里的ajax怎么获取返回的数据

ajax在jquery的底层是怎么实现的呢？