javascript ajax和jquery ajax

Posted 随便写写

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript ajax和jquery ajax相关的知识，希望对你有一定的参考价值。

一 进行ajax步骤:

1 获取dom值

2发送ajax请求

3返回成功进行前端逻辑处理

 

二 原生javascript的ajax

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <body>
        <button onclick="ajax()">发送请求</button>
    </body>
    <script type="text/javascript">
    function ajax(options) {
      var options={
        url: "https://m.lechebang.cn/gateway/shop/getServiceNetList",              //请求地址
        type: "POST",                       //请求方式
        data:{"cityId":10201,"token":"9d48188d9e3b6ca95788ba2dabf78351","appCode":101},        //请求参数
        dataType: "json"
      }
      var params =JSON.stringify(options.data);
      //创建 - 非IE6 - 第一步
      if (window.XMLHttpRequest) {
          var xhr = new XMLHttpRequest();
      } else { //IE6及其以下版本浏览器
          var xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
      }
       //连接 和 发送 - 第二步
      if (options.type == "GET") {
          xhr.open("GET", options.url + "?" + params, true);
          xhr.send(null);
      } else if (options.type == "POST") {
          xhr.open("POST", options.url, true);
          //设置表单提交时的内容类型
          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          xhr.send(params);
      }
      //接收 - 第三步
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          var status = xhr.status;
          if (status >= 200 && status < 300) {
              options.success && options.success(xhr.responseText, xhr.responseXML);
              console.log("调取ajax成功,开始进行前端逻辑处理数据");
          } else {
              options.fail && options.fail(status);
              console.log("调取ajax失败");
          }
        }
      }
    }
    </script>
</html>

 

三 jquery的ajax

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <button onclick="ajax()">发送请求</button>
    </body>
    <script type="text/javascript">
    function ajax(options) {
      var parameter=JSON.stringify({"cityId":10201,"token":"9d48188d9e3b6ca95788ba2dabf78351","appCode":101});
      $.ajax({
          type:"post",
          url:"https://m.lechebang.cn/gateway/shop/getServiceNetList",
          async:true,
          data:parameter,        //请求参数
        dataType: "json",
        success:function(result){
          console.log(result);
        },
      });

    }
    </script>
</html>

 

以上是关于javascript ajax和jquery ajax的主要内容，如果未能解决你的问题，请参考以下文章

jQuery Ajax 操作函数汇总

如何 jQuery Ajax 错误捕获和报告

基于jQuery的ajax系列之用FormData实现页面无刷新上传

使用 ajax、jquery 和 PHP 从数据库更新图像不起作用

带有ajax请求的jQuery .each循环

使用 Jquery、PHP、Mysql 进行 Ajax 分页 [关闭]