04-04：卡其漫画-jQuery中的AJAX使用

时间 2019-11-17

标签卡其 jquery ajax 使用栏目 JQuery 繁體版

原文原文链接

前言html

hello，你们好，接下来咱们一块儿来学习一下jQuery中的AJAX技术的使用，可让咱们的jquery

开发更简单，高效！！！ajax

内容概要后端

本章节的主要内容是来学习jQuery这个强大的方法库中已经封装好的ajax方法的使用，通bash

过本章节的知识学习以后，能够很是方便高效的使用jQuery中的ajax方法来发送请求，获取对服务器

应的数据。异步

咱们先来回顾一下ajax的基本使用步骤：函数

1.建立异步对象学习
2.设置请求行ui
3.设置请求头
4.设置请求体
5.监视异步对象的状态变化

因为每次发送ajax请求的时候，都须要咱们手动的来new XMLHttpRequest，这些都是重

复的行为，因而就有些大牛帮助咱们把经常使用的这些代码封装起来了，其中jQuery当中的ajax方

法就是咱们比较经常使用的发送异步请求的方法。

在这里呢，咱们只须要关注ajax方法中传入对象的几个属性的具体用法便可。咱们能够先给页

面中的一个按钮注册一个事件，经过事件的触发，来发送ajax请求，jQuery中的ajax方法是需

要传入一个对象，此对象有以下几个属性是须要重点学习

掌握的：

url：规定发送请求的 URL。默认是当前页面
type：规定请求的类型（GET 或 POST）
dataType:：预期的服务器响应的数据类型
success：当请求成功时运行的函数。

接下来咱们就小demo的方式来具体演示一下此方法的使用

首先，新建一个getData.html页面，在此页面中添加一个input按钮，并引入jQuery这个方法

第2步：获取这个页面中的按钮，并注册事件

第3步：调用jQuery中的ajax方法发送请求，此方法中要传入一个对象，对象中有上面介绍的属性

具体完整代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery中的ajax</title>
  <script src="./js/jquery.js"></script>
</head>
<body>
  <input type="button" value="获取数据">
  <script>
    // 1. 获取页面中的按钮
    var btn = document.querySelector('input')

    // 2. 给事件源注册事件
    btn.onclick = function(){

      // 3. 调用jQuery中的ajax方法发送请求
      $.ajax({
        type:'get',  //  设置发送请求的方式
        url:'https://www.easy-mock.com/mock/5d62446e09c1067760274c0b/example/getStuInfo',// 设置请求的路径
        success:function(data){
          console.log(data);
        }
      })
    }
  </script>
</body>
</html>复制代码

打开这个页面，当咱们触发按钮的时候，就会向服务器发送一条ajax请求，经过控制台，

咱们能够看到以下数据：

至此，咱们使用jQuery这个强大的方法库中的ajax方法来发送了一次请求，而且获取到了和以前原生js发送请求时一

模同样的效果，并且使用jQuery中的ajax来发送请求的话，可使唤咱们的开发效率更高，写起来更方便，在接下来的时间

里必定要多敲多练，好好的掌握ajax这门先后端交互的网页应用技术。

本章节的课程到此结束，下节再见！！！