Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据

下面是关于Jquery Ajax学习实例2的详细攻略。

一、什么是Ajax？

Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用于创建快速动态网页的前端Web开发技术。它允许使用JavaScript在不重新加载整个页面的情况下向服务器请求数据，使用XML或者JSON等格式传输数据，实现异步局部更新网页内容的效果。

二、Jquery Ajax 示例

这里我们将使用30秒笑话网站的API接口实现向页面发出AJAX请求并返回JSON格式数据的效果。

示例1：使用Jquery的$.ajax方法发送AJAX请求

$(document).ready(function() {
  $.ajax({
    url: "http://www.30s.com.cn/api/api-joke.php",
    type: "get",
    beforeSend: function() {
      console.log("AJAX请求正在发送中...");
    },
    success: function(data) {
      console.log("AJAX请求成功！");
      console.log(data); // 返回JSON格式的数据
    },
    error: function(xhr, textStatus, errorThrown) {
      console.log("AJAX请求失败！错误信息：" + errorThrown);
    },
    complete: function() {
      console.log("AJAX请求已完成！");
    }
  });
});

以上代码使用了Jquery的$.ajax方法发送AJAX请求到API接口网址"http://www.30s.com.cn/api/api-joke.php"，请求方式为GET。在请求发送前，会通过beforeSend函数打印一条AJAX请求正在发送中的信息。当请求成功后，会通过success函数打印返回的JSON格式的数据。如果请求失败，则会通过error函数打印错误信息。无论当前请求成功与否，都会通过complete函数打印AJAX请求已完成的信息。

示例2：使用Jquery的$.getJSON方法发送AJAX请求

$(document).ready(function() {
  $.getJSON("http://www.30s.com.cn/api/api-joke.php", function(data) {
    console.log("AJAX请求成功！");
    console.log(data); // 返回JSON格式的数据
  }).fail(function(xhr, textStatus, errorThrown) {
    console.log("AJAX请求失败！错误信息：" + errorThrown);
  }).always(function() {
    console.log("AJAX请求已完成！");
  });
});

以上代码使用了Jquery的$.getJSON方法发送AJAX请求到API接口网址"http://www.30s.com.cn/api/api-joke.php"，请求方式为GET。当请求成功后，会通过success回调函数打印返回的JSON格式的数据。如果请求失败，则会通过fail回调函数打印错误信息。无论当前请求成功与否，都会通过always回调函数打印AJAX请求已完成的信息。

三、总结

以上就是关于Jquery Ajax学习实例2的详细攻略。使用Jquery实现Ajax请求是前端Web开发中常用的技术之一，在实际应用中可以大大提高网站用户体验和响应速度。希望这篇攻略能帮助到正在学习Jquery Ajax技术的同学们。