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. 记我的小网站发现的Bug之一 —— 某用户签到了两次

    1.故事背景 今天上午我忙完手中的事情之后突然想起来我还没签到,于是赶紧打开签到页面,刚点击了签到按钮,提示"签到成功,获得25阅读额度!",正准备退出浏览器,忽然发现签到列表有异 ...

  2. (原)neuq oj 1022给定二叉树的前序遍历和后序遍历确定二叉树的个数

    题目描述 众所周知,遍历一棵二叉树就是按某条搜索路径巡访其中每个结点,使得每个结点均被访问一次,而且仅被访问一次.最常使用的有三种遍历的方式: 1．前序遍历:若二叉树为空,则空操作:否则先访问根结点, ...

  3. LeetCode（7）Reverse Integer

    题目: Reverse digits of an integer. Example1: x = 123, return 321 Example2: x = -123, return -321 分析: ...

  4. Atrenta电话面试（C++研发工程师）

    1.代码量是多少,你负责哪一块,工作量占%几,改进了什么   2.c++ 和 c 的 区别   3.list 和 vector 的 适用条件   4.hash_map 和 map 的 区别 , 使用h ...

  5. mysql常见监控项

    1.MySQL服务运行状态 约定所有MySQL服务都必须以ip1(内网ip)来绑定,每个机器只有一个ip1,可以有多个端口,即多个MySQL Server.采集程序读取ip端口信息文件来判断serve ...

  6. MySQL常用命令（三）---最值的搜索

    表结构存储数据如下: 需求如下: 1.每项物品的的最高价格是多少?(下面这个查询语句的结果集中你会发现 经销商(dealer)的值不对,第二个语句就是对的)2.对每项物品,找出最贵价格的物品的经销商. ...

  7. 图论trainning-part-1 B. A Walk Through the Forest

    B. A Walk Through the Forest Time Limit: 1000ms Memory Limit: 32768KB 64-bit integer IO format: %I64 ...

  8. ImportError: No module named ‘MySQLdb'

    1.APP未注册 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contentty ...

  9. Axure：从简单搜索到联想搜索的部件制作

    导读:最近一直都在整理原型部件,要说准备的最有感触的,当属搜索框无疑.搜索框的整理,前后加起来共耗时两天多.从最开始的按钮和文本框,到后来的图示,提示和联想查询.耗费了不少的心血,有必要总结一下,留个 ...

  10. 九度oj 题目1208：10进制 VS 2进制

    题目描述: 对于一个十进制数A,将A转换为二进制数,然后按位逆序排列,再转换为十进制数B,我们乘B为A的二进制逆序数.    例如对于十进制数173,它的二进制形式为10101101,逆序排列得到10 ...