js ajax 数据获取
在js中应用ajax 获取数据的方法，也写一个出来供复习所用
1.建议一个user.json 文件如下，保存名字为 user.json
- { "name": "huanying2015", "pwd": "123456", "sex": "男" }
2.1 创建一个ajax 请求，用于获取 user.json 文件的内容
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>Document</title>
- 6 <script>
- 7 window.onload = function() {
- 8 var Obtn = document.querySelector(\'input\');
- 9 Obtn.onclick = function() {
- 10 // 创建一个XMLHttpRequest 对象，这是ajax请求的核心；这里采用一个三元选择，是为了兼容ie6/ie5
- 11 // 在ie6/ie5中，使用new ActiveXObject(\'Microsoft.XMLHTTP\')创建XMLHttpRequest对象
- 12 var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject(\'Microsoft.XMLHTTP\');
- 13 // 获取ajax请求地址,在地址后面加入一个随机数，是为了解决ie浏览器的识别问题，ie浏览器相同的请求地址，不会再次进行请求，
- 14 // 加入一个随机数之后，再次请求时，ie会解析为不同的地址
- 15 var url = \'user.json?tid=\' + Math.random();
- 16 // 对请求的状态进行监控
- 17 // 0 -- 未初始化，确认XMLHttpRequest 对象已经创建，并为调用open()方法初始化做准备
- 18 // 1-- 载入，对XMLHttpRequest 对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置，并调用send()方法向服务器端发送请求。1表示正在向服务端发送请求
- 19 // 2--载入完成，收到服务器的相应数据，但是只是原始数据，并不能直接在客户端使用。值为2表示已经接收完全部相应数据，并为下一阶段解析做好准备
- 20 // 3--交互数据，解析相应数据，即根据服务器端相应头部返回的MIME类型把数据转换成能通过 responseBody,responseText,responseXML属性存取的格式,为在客户端调用做好准备。
- 21 // 值为3表示正在解析数据
- 22 // 4--完成， 此阶段确认全部数据都已经解析为可以在客户端使用的数据， 解析已经完成。 值为4表示解析完成， 可以通过XMLHttpRequest对象对应的属性获取数据
- 23 xhr.onreadystatechange = function() {
- 24 if (xhr.readyState == 4) {
- 25 // 将XMLHttpRequest返回的数据转换成为json格式（因为返回来的是一个字符串）
- 26 var obj = JSON.parse(xhr.responseText);
- 27 var str = \'\';
- 28 // 遍历obj
- 29 for (var key in obj) {
- 30 str += "<p>" + key + "," + obj[key] + "</p>";
- 31 }
- 32 // 输出obj
- 33 document.querySelector(\'.box\').innerHTML = str;
- 34 }
- 35 }
- 36 xhr.open(\'GET\', url, true);
- 37 xhr.send(null);
- 38 }
- 39 }
- 40 </script>
- 41 </head>
- 42 <body>
- 43 <input type=\'button\' value="ajax请求调用数据">
- 44 <div class=\'box\'></div>
- 45 </body>
- 46 </html>
运行结果：（这里html文件名为ajax100.html，在这里直接双击打开ajax100.html文件是不能获取user.json内容的，必须要在浏览器输入地址，打开服务器才能获取user.json文件内容）
以上就是ajax 从user.json获取的数据
备注：以上是使用GET方式发送请求，如果使用POST方式，则在send()方法里添加要发送的参数，并且要使用 setRequestHeader() 来添加 HTTP 头
例如：
- xhr.open("POST",url,true);
- xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
- xhr.send("name=huanying2015&pwd=123456");
2.2 使用jquery 获取ajax数据
2.2.1 使用 jquery get 方式获取数据
建立两个文件：分别命名为 success.html 和 error.html
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>Document</title>
- 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
- 7 <script>
- 8 $(function() {
- 9 $(\'#login\').on(\'click\', function() {
- 10 var userName = $(\'#user\').val();
- 11 var pwd = $(\'#pwd\').val();
- 12 $.get(\'user.json\', {}, function(obj) {
- 13 if (userName == obj[\'name\'] && pwd == obj[\'pwd\']) {
- 14 location.href = "success.html";
- 15 } else {
- 16 location.href = "error.html";
- 17 }
- 18 });
- 19 });
- 20 });
- 21 </script>
- 22 </head>
- 23 <body>
- 24 用户名: <input type="text" name="user" id="user"> <br> 密码: <input type="password" name="pwd" id="pwd"> <br>
- 25 <input type="button" value="登录" id="login">
- 26 </body>
- 27 </html>
2.2.2 使用 jquery post 方式获取数据
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>Document</title>
- 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
- 7 <script>
- 8 $(function() {
- 9 $(\'#login\').on(\'click\', function() {
- 10 var userName = $(\'#user\').val();
- 11 var pwd = $(\'#pwd\').val();
- 12 $.post(\'user.json\', {}, function(obj) {
- 13 if (userName == obj[\'name\'] && pwd == obj[\'pwd\']) {
- 14 location.href = "success.html";
- 15 } else {
- 16 location.href = "error.html";
- 17 }
- 18 });
- 19 });
- 20 });
- 21 </script>
- 22 </head>
- 23 <body>
- 24 用户名: <input type="text" name="user" id="user"> <br> 密码: <input type="password" name="pwd" id="pwd"> <br>
- 25 <input type="button" value="登录" id="login">
- 26 </body>
- 27 </html>
2.2.3 使用 jquery ajax 方式获取数据
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>Document</title>
- 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
- 7 <script>
- 8 $(function() {
- 9 $(\'#login\').on(\'click\', function() {
- 10 var userName = $(\'#user\').val();
- 11 var pwd = $(\'#pwd\').val();
- 12 $.ajax({
- 13 url: \'user.json?tid=\' + Math.random(),
- 14 data: {},
- 15 type: \'get\',
- 16 dataType: \'json\',
- 17 success: function(obj) {
- 18 if (userName == obj[\'name\'] && pwd == obj[\'pwd\']) {
- 19 location.href = \'success.html\';
- 20 } else {
- 21 location.href = \'error.html\';
- 22 };
- 23 },
- 24 error: function() {
- 25 console.log(\'ajax请求失败！\');
- 26 }
- 27 });
- 28 });
- 29 });
- 30 </script>
- 31 </head>
- 32 <body>
- 33 用户名: <input type="text" name="user" id="user"> <br> 密码: <input type="password" name="pwd" id="pwd"> <br>
- 34 <input type="button" value="登录" id="login">
- 35 </body>
- 36 </html>
get方式，post方式，ajax方式，运行结果都是一样的，如下：
版权声明：本文为huanying2015原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。