Question

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

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

[Deprecation]主线程上的同步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

观察下面的代码片段它应该帮助你，我建议坚持

$.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))

解释的方法来自ajax

上的jquery doc

$(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>

为什么我的AJax代码从API中获取信息无法正常工作？

1 个答案: