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. Google实践中总结的Python规范，get了吗？

    好的代码风格,给人舒服的感觉,今天介绍一下谷歌的Python风格规范 1 分号 不要在行尾加分号, 也不要用分号将两条命令放在同一行. 2 行长度 每行不超过80个字符:不要使用反斜杠连接行.Pyth ...

  2. 【转】怎么把本地项目和远程git仓库相连通

    1. 打开在你的项目文件夹,输入下面的命令 git init 输完上面的命令,文件夹中会出现一个.git文件夹,如下图所示,其他的的文件也会出现蓝色小问号的标志 2. 添加所有文件 git add . ...

  3. DFS:POJ1562-Oil Deposits（求连通块个数）

    Oil Deposits Time Limit: 1000MS Memory Limit: 10000K Description The GeoSurvComp geologic survey com ...

  4. 【08】css sprite是什么,有什么优缺点

    [08]css sprite是什么?有什么优缺点? 概念:将多个小图片拼接到一个图片中.通过background-position和元素尺寸调节需要显示的背景图案. 优点: 减少HTTP请求数,极大地 ...

  5. STM32F407 窗口看门狗 个人笔记

    窗口看门狗的喂狗时间范围 由框图知: 复位条件是:当且仅当 { 启动位启动 且 { T6为0 (计数器的值减小到0X03F即下限,还没喂狗,即喂狗太晚) 或 计数器的值高于上限时喂狗,即喂狗太早 } ...

  6. 2017 ACM/ICPC Asia Regional Shenyang Online

    cable cable cable Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  7. MySQL 子查询优化案例

    开发人员给了一个sql ,结构如下delete from B where ID in (select NID from H where guid='xxx'); 内部sql满足条件的结果集只有一条,但 ...

  8. vue v-dialogDrag: 弹窗拖拽

    Vue.directive('dialogDrag', { inserted:function(el) { const dragDom = el.querySelector('.jsPropupLay ...

  9. POJ 1038 Bugs Integrated, Inc. ——状压DP

    状态压缩一下当前各格子以及上面总共放了几块,只有012三种情况,直接三进制保存即可. 然后转移的时候用搜索找出所有的状态进行转移. #include <map> #include < ...

  10. K-lord #3 (组合数学)

    题目描述 如图,设一个圆分成 n 个扇形 S1 ... ,Sn (扇形大小不一样),现用 k 种不同的颜色对这 n 个扇形进行染色 ( n>=3 , k>=3 ); 每一个扇形染一种颜色, ...