javascript ajax和jquery ajax

時間 2019-11-19

標籤 javascript ajax jquery 欄目 JavaScript 简体版

原文原文鏈接

一進行ajax步驟:javascript

1 獲取dom值html

2發送ajax請求前端

3返回成功進行前端邏輯處理java

二原生javascript的ajaxjquery

<!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的ajaxajax

<!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>

四 jquery實現ajax並將返回值渲染到頁面json

<!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>
      <!--<div class="item" style="border: 1px #000 solid;">
        <div class="storeName"></div>
      <div class="telephone"></div>
      <div class="address"></div>
      </div>-->
        <button onclick="sendAjax()">發送請求</button>
    </body>
    <script type="text/javascript">
    function sendAjax(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){
          var listObj=result.result.storeDetailResults;
          html='';
          var template='<div class="item" style="border: 1px #000 solid;">'+
                  '<div class="storeName">@storeName</div>'+
                  '<div class="telephone">@telephone</div>'+
                  '<div class="address">@address</div>'+
                '</div>';
          for(var i=0;i<listObj.length;i++){
            html+=template.replace("@storeName",listObj[i].storeName).replace("@telephone",listObj[i].telephone).replace("@address",listObj[i].address);
          }
          $("body").html(html);
        },
      });

    }
    </script>
</html>