ajax请求，首先需要服务器（首先你需要node）

npm i -g http-server

其次，进入当前目录（默认服务器端口8080）

http-server

点击进入：localhost:8080/apply-ajax.html

apply-ajax.html

（推荐封装ajax，以及ajax转码过来或者转码回去后台）

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>Document</title>

     <meta name="keywords" content="">

     <meta name="description" content="">

     <style>

         * {

             margin: 0;

             padding: 0;

             list-style: none;

         }

     </style>

 </head>

 <body>

     <button id="btn">请求数据</button>

     <ul id="list"></ul>

     <script>

         var btn = document.getElementById('btn');

         var list = document.getElementById('list');

         btn.onclick = function() {

             // 1.创建XMLHttpRequest对象

             var xhr = null;

             if (window.XMLHttpRequest) { // 非IE5/6

                 xhr = new XMLHttpRequest(); //实例对象

             } else { // IE5/6

                 xhr = new ActiveXObject('Microsoft.XMLHTTP');

             };

             // 2.打开与服务器的链接

             xhr.open('get', 'test.json?_=' + new Date().getTime(), true); //生成不一样的url解决缓存问题

             // 3.发送给服务器

             xhr.send(null); //get请求

             // 4.响应就绪

             xhr.onreadystatechange = function() {

                 if (xhr.readyState == 4) { //请求完成

                     if (xhr.status == 200) { //ok

                         var json = JSON.parse(xhr.responseText); //解析成json对象

                         for (var i = 0; i < json.length; i++) {

                             list.innerHTML += '<li>姓名:' + json[i].name + '， 性别:' + json[i].sex + '， 年龄:' + json[i].age + '， 成绩:' + json[i].score + '</li>';

                         };

                     } else {

                         alert(xhr.status);

                     };

                 };

             }

         }

     </script>

 </body>

 </html>

test.json（前台可以先做json对象数组测试，待数据一到调入接口即可）

 [

     { "name": "\u8001\u738b", "sex": "女", "age": 19, "score": 66 },

     { "name": "老刘", "sex": "男", "age": 22, "score": 72 },

     { "name": "老李", "sex": "女", "age": 24, "score": 85 },

     { "name": "老张", "sex": "男", "age": 30, "score": 96 }

 ]

ajax请求后台交互json示例的更多相关文章

  1. 前台返回json数据的常用方式+常用的AJAX请求后台数据方式

    我个人开发常用的如下所示: 之所以像下面这样下,一是前台Ajax,二是为安卓提供接口数据 现在常用的是返回JSON数据,XML的时代一去不复返 JSON相对于XML要轻量级的多 对JSON不是十分熟悉 ...

  2. ajax简单后台交互

    ajax简单后台交互 1,扯淡 单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每 ...

  3. ajax往后台传json格式数据报415错误

    问题描述: ajax往后台传json格式数据报415错误,如下图所示 页面代码 function saveUser(){ var uuId = document.getElementById(&quo ...

  4. 使用ajax请求SpringMVC返回Json出现乱码解决方法

    1:在使用ajax请求后台访问数据的数据,后台返回的数据是乱码,带??问号的乱码,之前还一直没有遇到过,在这里记录整理一下,贴出解决代码! (1):前台使用ajax ,已经设定返回的结果为json格式 ...

  5. C# 动态创建SQL数据库（二） 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示，编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求

    C# 动态创建SQL数据库(二) 使用Entity Framework  创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...

  6. ajax请求后台有时走有时不走

    ajax请求后台有时走有时不走   ajax请求后台有时走有时不走,是因为没有将请求设置为同步方式,async:false,(默认为true即异步).如果不想使用缓存可以将cache:false,例如 ...

  7. JS 操作 HTML 和 AJAX 请求后台数据

    为某个元素插入值,添加属性,添加子元素 <div class="col-sm-6"> <select class="form-control" ...

  8. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  9. Ajax请求后台数据

    一.前期准备 安装好XAMPP软件,并运行起来.本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB.PHP和Perl.XAMPP开放源码包的设 ...

随机推荐

  1. Codeforces C. Sonya and Problem Wihtout a Legend（DP）

    Description Sonya was unable to think of a story for this problem, so here comes the formal descript ...

  2. CentOS6.5的安装及忘记root密码的措施

    CentOS6.5的安装及忘记root密码的措施 VMware虚拟机的配置 1.文件->新建->自定义->下一步 2.选择稍后安装操作系统 我们将采用自定义安装,杜绝VMware的一 ...

  3. 【LeetCode】Roman to Integer(罗马数字转整数)

    这道题是LeetCode里的第13道题. 题目说明: 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1 ...

  4. Laya List翻页滚动方案 & List滚动源码解析

    Laya List翻页滚动方案 & List滚动源码解析 @author ixenos 2019-03-29 1.List翻页滚动方案 /** * 计算下一页的起始索引, 不足时补足 * @p ...

  5. MySQL 待解决死锁

    官方文档:https://dev.mysql.com/doc/refman/5.6/en/innodb-locks-set.html 线上出现一个死锁现象,信息显示的是两条对同一个表的不同记录的upd ...

  6. （转）新ITC提交APP常见问题与解决方法(Icon Alpha,Build version,AppIcon120x120)(2014-11-17)

    1)ICON无法上传,提示图片透明(有Alpha通道) 苹果现在不接受png里的Alpha了,提交的图标带有Alpha通道就提示: 简单处理:用自带的预览打开,导出时不勾选Alpha,仍保存为png格 ...

  7. 【bzoj3689】异或之 可持久化Trie树+堆

    题目描述 给定n个非负整数A[1], A[2], ……, A[n].对于每对(i, j)满足1 <= i < j <= n,得到一个新的数A[i] xor A[j],这样共有n*(n ...

  8. BZOJ 3230 相似子串 ——后缀数组

    题目的Source好有趣. 我们求出SA,然后求出每一个后缀中与前面本质不同的字符串的个数. 然后二分求出当前的字符串. 然后就是正反两次后缀数组求LCP的裸题了. 要注意,这时两个串的起点可能会相同 ...

  9. BZOJ 3527 [Zjoi2014]力 ——FFT

    [题目分析] FFT,构造数列进行卷积,挺裸的一道题目诶. 还是写起来并不顺手,再练. [代码] #include <cmath> #include <cstdio> #inc ...

  10. 二分图最小覆盖的Konig定理及其证明,最小的覆盖证明

    [转http://www.cppblog.com/abilitytao/archive/2009/09/02/95147.html  ->  http://yejingx.ycool.com/p ...