ajax请求后台交互json示例
2023-09-11 14:14:38 时间
ajax请求,首先需要服务器(首先你需要node)
npm i -g http-server
其次,进入当前目录(默认服务器端口8080)
http-server
点击进入:localhost:8080/apply-ajax.html
apply-ajax.html
(推荐封装ajax,以及ajax转码过来或者转码回去后台)
1 <!doctype html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>Document</title>
7 <meta name="keywords" content="">
8 <meta name="description" content="">
9 <style>
10 * {
11 margin: 0;
12 padding: 0;
13 list-style: none;
14 }
15 </style>
16 </head>
17
18 <body>
19 <button id="btn">请求数据</button>
20 <ul id="list"></ul>
21 <script>
22 var btn = document.getElementById('btn');
23 var list = document.getElementById('list');
24 btn.onclick = function() {
25 // 1.创建XMLHttpRequest对象
26 var xhr = null;
27 if (window.XMLHttpRequest) { // 非IE5/6
28 xhr = new XMLHttpRequest(); //实例对象
29 } else { // IE5/6
30 xhr = new ActiveXObject('Microsoft.XMLHTTP');
31 };
32 // 2.打开与服务器的链接
33 xhr.open('get', 'test.json?_=' + new Date().getTime(), true); //生成不一样的url解决缓存问题
34 // 3.发送给服务器
35 xhr.send(null); //get请求
36 // 4.响应就绪
37 xhr.onreadystatechange = function() {
38 if (xhr.readyState == 4) { //请求完成
39 if (xhr.status == 200) { //ok
40 var json = JSON.parse(xhr.responseText); //解析成json对象
41 for (var i = 0; i < json.length; i++) {
42 list.innerHTML += '<li>姓名:' + json[i].name + ', 性别:' + json[i].sex + ', 年龄:' + json[i].age + ', 成绩:' + json[i].score + '</li>';
43 };
44 } else {
45 alert(xhr.status);
46 };
47 };
48 }
49 }
50 </script>
51 </body>
52
53 </html>
test.json(前台可以先做json对象数组测试,待数据一到调入接口即可)
1 [
2 { "name": "\u8001\u738b", "sex": "女", "age": 19, "score": 66 },
3 { "name": "老刘", "sex": "男", "age": 22, "score": 72 },
4 { "name": "老李", "sex": "女", "age": 24, "score": 85 },
5 { "name": "老张", "sex": "男", "age": 30, "score": 96 }
6 ]
相关文章
- 6.后台验证码-session作用域
- ajax 参数data问题 data中的 参数名 参数值为string 提交到后台后,会自动转换参数名相同的 类型 和 js字符串拼接
- 仅用aspx文件实现Ajax调用后台cs程序。(实例)
- 解决Ajax在兼容模式下后台调用执行两次结果不变的问题(已解决)!
- 后台开发:核心技术与应用实践1.2 函数
- 后台开发:核心技术与应用实践1.6.2结构体、共用体在内存单元占用字节数的计算
- Android后台杀死系列之四:Binder讣告原理
- ajax传递数组到后台,js传递数组到后台
- 【JAVA UI】HarmonyOS怎么判断Service怎么在后台运行
- 华为后台某应用商品展示价格币种随其他应用配置而变化
- ajax请求后台,response.sendRedirect失效,无法重定向
- 转 php 框架 Php 依赖框架 后台 调用python 脚本
- 一、表单和ajax中的post请求&&后台获取数据方法
- vue实战入门后台篇三:springboot+mybatis实现网站后台-实体及基础框架搭建
- ThinkPHP6项目基操(11.实战部分 部署后台静态页面模板及后台登录页面)
- layui后台框架点击子页面按钮时添加顶部tap栏
- 苹果将大规模扩建亚利桑那州和内华达州数据中心 加强服务后台
- HM后台(五)
- vue后台(四)
- ASP.NET之通过JS向服务端(后台)发出请求(__doPostBack is undefined)
- MVC4中AJAX Html页面打开调用后台方法实现动态载入数据库中的数据
- 后台多任务多线程断点下载
- Ajax.BeginForm()实现ajax无刷新提交
- C# 后台访问webapi
- Vue3:自定义指令以及简单的后台管理权限封装