为什么我的用于从 API 获取信息的 AJax 代码不起作用？

Question

这是我在这里的第一篇文章，我希望我不会违反任何规则。如果我这样做了，请把我的失败告诉我，以便我下次学习。

所以我编写了一个代码，该代码应该将来自 API 的信息作为文本呈现在我的 html 页面上。 AJAX 代码不起作用，我不知道为什么，控制台上什么也没有显示，我只收到来自 chrome 的警告：

[弃用] 主线程上的同步 XMLHttpRequest 是 不推荐使用，因为它对最终用户的不利影响 经验。如需更多帮助，请查看https://xhr.spec.whatwg.org/。

这是我的 AJAX 代码：我做错了吗？

$.ajax
({
  type: "GET",
  url: "xxxxxxxxxx",
  dataType: 'json',
  async: false,
  username: "xxxxxxx",
  password: "xxxxxxxxxx",
  data: '{ "id" }',
  success: function (){
    alert('Thanks for your comment!'); 
  }
});

Answer 1

观察下面的代码 sn-p 它应该可以帮助你，我建议坚持使用

$.ajax({...})
//Code to run if the request succeeds (is done);
//The response is passed to the function
.done(callback(json))
//Code to run if the request fails; the raw request and
//status codes are passed to the function
.fail(callback(xhr, status, errorThrown))
//Code to run regardless of success or failure;
.always(callback(xhr, status)) 

解释的方法 来自 jquery doc ajax

$(document).ready(function() {

  $("#btn").click(function(event) {
    var content = $("#content");
    var url = $("#url").val();



    $.ajax({
      type: "GET",
      url: url,
      data:{id:3},//observe this line, send object instead
      dataType: 'json',
      async: false
    })
    .done(function(data){
      alert('Thanks for your comment!');
      content.text(JSON.stringify(data));//convert object to string
    })
    .fail()
    .always();

  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<p>
  Enter the url to fetch on the div using jquery ajax method
  <input id="url" class="" placeholder="Enter url" value="https://jsonplaceholder.typicode.com/posts" />
  <button class="btn btn-primary" id="btn">Fetch</button>
</p>

<br>

<div id="content" class="container well">
  content is going to show here
</div>