• 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方式,运行结果都是一样的,如下:

    http://www.cnblogs.com/huanying2015 博客随笔大多数文章均属原创,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利
  • 相关阅读:
    MYSQL 神奇的操作insert into test select * from test;
    mysql排序字段为空的排在最后面
    Redis有效时间设置及时间过期处理
    Dom4j 使用简介
    ASP.NET中使用多个runat=server form(转)
    谨以此文献给才毕业25年的朋友(转)
    门户网站
    庄思浩和BEA公司
    是什么限制了我们面向对象(的开发) (转)
    模态窗口和非模态窗口
  • 原文地址:https://www.cnblogs.com/huanying2015/p/8126007.html
Copyright © 2020-2023  润新知