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. Python日志(logging)模块,shelve,sys模块

    菜鸟学python第十七天 1.logging 模块 logging模块即日志记录模块 用途:用来记录日志 为什么要记录日志: 为了日后复查,提取有用信息 如何记录文件 直接打开文件,往里写东西 直接 ...

  2. PAT Basic 1065

    1065 单身狗 “单身狗”是中文对于单身人士的一种爱称.本题请你从上万人的大型派对中找出落单的客人,以便给予特殊关爱. 输入格式: 输入第一行给出一个正整数 N(≤ 50 000),是已知夫妻/伴侣 ...

  3. css 标题

    纯CSS制作的复古风格的大标题 .vintage{ background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAA ...

  4. 关于springmvc返回json格式数据

    1.引入maven依赖 <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifac ...

  5. IntelliJ IDEA 类和方法注释的生成以及Javadoc的简单使用记录

    idea,设置类注释和,方法注释的常见的设置方法(不同的版本设置方法有所偏差,简单记录一些目前自己在使用的方法,) 方法注释:在keyMap中搜索Fix doc comment ,后点击右键设置一个快 ...

  6. Python 编程要求

    1.添加前缀 #!/usr/bin/env python # -*- coding:utf-8 -*- 2.py文件.函数都要写好注释 3.主函数要加上判断 if __name__ == " ...

  7. Palindromic Paths（DP）

    描述 Given an N×N grid of fields (1≤N≤500), each labeled with a letter in the alphabet. For example: A ...

  8. 转自kuangbin的AC自动机（赛前最后一博）

    有了KMP和Trie的基础,就可以学习神奇的AC自动机了.AC自动机其实就是在Trie树上实现KMP,可以完成多模式串的匹配.           AC自动机 其实 就是创建了一个状态的转移图,思想很 ...

  9. jsessionid 所引起的404问题和解决方法

    问题: 在SpringMvc使用RedirectView或者"redirect:"前缀来做重定向时,Spring MVC最后会调用: response.sendRedirect(r ...

  10. BASH重定向问题

    APUE 3.5关于重定向有个容易迷惑人的问题: ./a.out > outfile 2>&1 ./a.out 2>&1 > outfile 问两者区别? in ...