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. perl学习之：匹配修饰符/s /m

    m 是将字符串作为多行处理,s是将字符串作为单行处理,如果是s在字符串中出现的\n就相当于普通字符. 6.6. Matching Within Multiple Lines6.6.1. Problem ...

  2. cs229_part6

    part 6 接下来就是无监督学习算法了. k均值聚类 问题背景 样本集描述: \[ x\in D, x\in R^n \] 之前的有监督学习问题中,所有的x都有对应的y.但是如果我们的x没有对应的y ...

  3. PAT Basic 1025

    1025 反转链表 给定一个常数K以及一个单链表L,请编写程序将L中每K个结点反转.例如:给定L为1→2→3→4→5→6,K为3,则输出应该为3→2→1→6→5→4:如果K为4,则输出应该为4→3→2 ...

  4. html,css样式错误总结

    a元素不能嵌套a元素 a元素嵌套a元素会使a元素闭合出现混乱,导致浏览器识别出多个a元素.

  5. Java-获取一个类的父类

    如何使用代码获取一个类的父类 package com.tj; public class MyClass implements Cloneable { public static void main(S ...

  6. 学习笔记1——下载和安装WordPress

    首先,到WordPress官方网站下载WordPress,下载地址https://cn.wordpress.org/txt-download/ 然后,将下载后的文件夹放在www目录下,到浏览器中输入l ...

  7. LeetCode--二分查找相关算法

    -(1)有一个升序排列的非负数组,要求利用o(logn)的时间复杂度找到数组中确定数字target的第一次出现的位置下标和最后一次出现的位置下标,如果不存在该target返回[-1,-1] 解决方案: ...

  8. hihoCoder #1471 拥堵的城市

    这道题目是hihoCoder Challenge 27的C题,我考虑了5天:(. 计数问题.由于树的结构的特殊性(树具有递归结构),不难想到思路是树形DP.由于这是[计数问题]而非[优化问题],我们思 ...

  9. Bzoj1083 1083: [SCOI2005]繁忙的都市【MST】

    大水题,真不知道出题者是怎么把这么水的题出的这么长的TAT 其实这题在于考语文水平,一共三个要求,前两个要求意思就是要选出的道路是树形的,最后一个要求就是要权值最小,于是整个题意说白了就是求一棵MST ...

  10. K-th Number（poj 2104）

    题意:静态第K大 #include<cstdio> #include<iostream> #include<cstring> #define N 200010 #d ...