Ajax的两种写法
先写一串数据
1 {
2 "status": 200,
3 "data": {
4 "name": "web211001",
5 "student": [
6 {
7 "id": 10001,
8 "name": "张三"
9 },
10 {
11 "id": 10001,
12 "name": "李四"
13 },
14 {
15 "id": 10001,
16 "name": "王五"
17 }
18 ]
19 },
20 "msg": "错误信息"
21 }
用原生的Ajax输出数据：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <script>
9 //创建步骤
10 window.onload = function () {
11 // 1) 创建 XMLHttpRequest 对象, 也就是创建一个异步调用对象
12 var request = new XMLHttpRequest();
13 // 2) 创建一个新的 HTTP 请求, 并指定该 HTTP 请求的方法、URL 及验证信息
14 request.open("get", "./data.json");
15 // 3) 设置响应 HTTP 请求状态变化的函数
16 request.onreadystatechange = function () {
17 if (request.status === 200 && request.readyState === 4) {
18 //console.log(request.responseText)//获取纯文本
19 // console.log(request.responseXML)
20 // 5) 获取异步调用返回的数据
21 var data =JSON.parse(request.responseText);
22 // console.log(data);
23 // 6) 使用 JavaScript 和 DOM 实现局部刷新
24 if (data.status===200) {
25 var cls =data.data;
26 document.querySelector("h1").innerText=cls.name;
27 }else{
28 console.log(data.msg);
29
30 }
31 }
32 }
33 request.send();
34 // 4) 发送 HTTP 请求
35 }
36 </script>
37 </head>
38
39 <body>
40 <h1></h1>
41 </body>
42
43 </html>
然后用jQuery请求：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <script src="./js/jquery-3.3.1.min.js"></script>
9 <script>
10 $(function () {
11 // $.ajax({
12 // method: "get",
13 // url: "./data.json",
14 // // data: { id: 10001 },//请求参数
15 // // data:"id=10001&name=zhangsan",application/x-www-form-urlencoded
16 // contentType: "json",//请求格式 参数的格式
17 // //dataType: "text",//返回数据格式
18 // success: function (data) {
19 // console.log(data);
20 // if (data.status === 200) {
21 // var cls = data.data;
22 // $("legend").text(cls.name);
23 // var students = cls.student;
24 // for (let index = 0; index < students.length; index++) {
25 // const stu = students[index];
26 // $(".data tbody").append("<tr><td>" + stu.id + "</td><td>" + stu.name + "</td></tr>");
27 // }
28 // } else {
29 // console.log(data.msg);
30 // }
31 // },
32 // error: function (res) {
33 // console.log(res);
34
35 // }
36 // }),
37 $.get("./data.json",function(data){
38 if (data.status === 200) {
39 var cls = data.data;
40 $("legend").text(cls.name);
41 var students = cls.student;
42 for (let index = 0; index < students.length; index++) {
43 const stu = students[index];
44 $(".data tbody").append("<tr><td>" + stu.id + "</td><td>" + stu.name + "</td></tr>");
45 }
46 } else {
47 console.log(data.msg);
48 }
49 })
50 })
51 //.$post();
52 </script>
53 </head>
54
55 <body>
56 <legend></legend>
57 <table class="data">
58 <thead>
59 <th>id</th>
60 <th>name</th>
61 </thead>
62 <tbody>
63
64 </tbody>
65 </table>
66 </body>
67
68 </html>
Ajax的两种写法的更多相关文章
- Struts2实现ajax的两种方式
基于Struts2框架下实现Ajax有两种方式,第一种是原声的方式,另外一种是struts2自带的一个插件. js部分调用方式是一样的: JS代码: function testAjax() { var ...
- ORACLE 查询一个数据表后通过遍历再插入另一个表中的两种写法
ORACLE 查询一个数据表后通过遍历再插入另一个表中的两种写法 语法 第一种: 通过使用Oracle语句块 --指定文档所有部门都能查看 declare cursor TABLE_DEPT and ...
- EF架构~linq模拟left join的两种写法,性能差之千里!
回到目录 对于SQL左外连接我想没什么可说的,left join将左表数据都获出来,右表数据如果在左表中不存在,结果为NULL,而对于LINQ来说,要实现left join的效果,也是可以的,在进行j ...
- 运算符关键字。数据区别大小写。日期范围。判空的两种写法。NOT IN的两种写法。IN范围可含NULL,但NOT IN值范围不能含NULL。
比较:>,<,=,>=,<=,<>(!=) 逻辑:AND,OR,NOT 范围:BETWEEN...AND... 范围:IN,NOT IN 判空:IS NULL, I ...
- 快速排序partition过程常见的两种写法+快速排序非递归实现
这里不详细说明快速排序的原理,具体可参考here 快速排序主要是partition的过程,partition最常用有以下两种写法 第一种: int mypartition(vector<int& ...
- java 路径分隔符File.separator 以及 路径两种写法"/"和"\\"
一.File.separator File file=new File(); 这句是新建一个文件.file.separator这个代表系统目录中的间隔符,说白了就是斜线,不过有时候需要双线,有时候是单 ...
- iOS中表视图单元格事件用nib和storyboard的两种写法总结
从ios6开始,苹果公司推出了storyborad技术取代了nib的写法,这样代码量确实少写了很多,也比较简洁.但是,从学习的角度来说,阿堂认为 用nib的写法,虽然多了些代码,但是对于掌握知识和原理 ...
- linq和ef关于group by取最大值的两种写法
LINQ: var temp = from p in db.jj_Credentials group p by p.ProfessionID into g select new { g.Key, Ma ...
- ThinkPHP中Widget的两种写法及调用
Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: clas ...
- es6对象内函数的两种写法
es6对象内函数一般有两种写法: var person1 = { name: "p1", sayThis() { console.log(this); } }; var perso ...
随机推荐
- HANDLE和HMOUDLE、HWND讲解
HWND是线程相关的,通常指明窗口句柄,通过句柄找到窗口所属进程和线程 Handle 是代表系统的内核对象,如文件句柄,线程句柄,进程句柄.系统对内核对象以链表的形式进行管理,载入到内存中的每一个内核 ...
- Spring入门之使用 spring 的 IOC 解决程序耦合（Spring 基于 XML 的 IOC 细节[掌握]）（03-02）
3.3Spring 基于 XML 的 IOC 细节[掌握] 3.3.1 spring 中工厂的类结构图 3.3.1.1 BeanFactory 和 ApplicationContext 的区别 Bea ...
- ubuntu拨号上网与以太网
拨号上网使用的是ppp协议,主机和主机之间是点对点连接的,通常使用掩码255.255.255.255的方式来表示一个点对点连接. 以太网:使用的以太网协议. 拨号上网和以太网是两个完全不同的东西,如果 ...
- syntax_lead_x.txt
select lead( t1.field_date-1, 1, null ) over(partition by t1.field_str order by t1.field_str),*from ...
- MyBatis_06(自定义映射resultMap)
主题:自定义映射resultMap "自定义映射resultMap",可以解决什么问题: 1-"属性" 和 "字段名" 不一致的情况 2-& ...
- 在CentOS 7.4下配置VNC Server服务
安装步骤 1. 查询系统是否安装vnc-server [root@localhost ~]# rpm –qa | grep vnc 如果有返回值,类似于vnc-server-的值,说明已经安装了vnc ...
- T14 风扇狂转修整TPFanControl.ini 屏蔽pwr
//注意标红部份屏蔽pwr //NEW: Set UseTWR=1 to see more sensors, will work only on newer T4xx// ATTENTION: if ...
- C语言学习记录（三）
C语言学习记录(三) 一.知识要点(数据类型.运算符与表达式) 1.C语言的数据类型 C语言数据结构有:基本类型.指针类型.构造类型和空类型.其中基本类型:查看书籍的22页表3-1. C语言的基本数据 ...
- Java Swing 禁止黏贴动作
碰到一个需求,不让复制黏贴. 可考的方法有:1 重写JTextField paste 函数 2 删除组件ActionMap中与CTRL + V按键相关的操作 因为JTextField 已经被封装 ...
- C#判断窗体是否打开,并获取聚焦、未打开则新建一个子窗体
在桌面程序开发会遇到的情况,托盘功能或者是小功能弹窗问题: 现有一个主窗体有子窗体 子窗体每个都可以新建其他窗体问题:新建子窗体时怎么判断子窗体是否打开?若子窗体打开则置顶获取焦点.若未打开则新建一个 ...