一 进行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>

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

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

效果如下:

javascript ajax和jquery ajax的更多相关文章

  1. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  2. 框架----Django之Ajax全套实例（原生AJAX，jQuery Ajax，“伪”AJAX，JSONP，CORS）

    一.原生AJAX,jQuery Ajax,“伪”AJAX,JSONP 1. 浏览器访问 http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ ...

  3. JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

    1.$和jquery在全局命名空间中定义的唯一两个变量.   2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象.   3.jquery的四种调用方式:     <1>传递C ...

  4. 诅咒JavaScript之：Jquery ajax提交内容异常

    jquery ajax 通过url提交内容,在服务器端获取却出现很奇怪的值,代码如下: ajaxurl = "aspx/logTable.ashx?action=load&Every ...

  5. JQuery AJAX: 了解jQuery AJAX

    jQuery AJAX 一.简介1.AJAX是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新.AJAX = 异步 JavaScript 和 XML(Asynchronous ...

  6. AJAX和jQuery Ajax总结

    AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...

  7. AJAX，jQuery Ajax和Deferred

    AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...

  8. 原生js ajax与jquery ajax的区别

    原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...

  9. 原生ajax 和jquery ajax 个人总结

                   AJAX:即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. 通过在后台 ...

随机推荐

  1. Codeforces 889C Maximum Element（DP + 计数）

    题目链接  Maximum Element 题意  现在有这一段求序列中最大值的程度片段: (假定序列是一个1-n的排列) int fast_max(int n, int a[]) { int ans ...

  2. T2821 天使之城 codevs

    http://codevs.cn/problem/2821/ 题目描述 Description 天使城有一个火车站,每辆火车都从A方向驶入车站,再从B方向驶出车站. 为了调度火车,火车站设有停放轨道, ...

  3. SD 胡策 Round 1 T3 彩尾巴猹的二进制数

    发现一个区间[L,R]代表的2进制数是3的倍数,当且仅当从L开始的后缀二进制值 - 从R+1开始的后缀二进制值 是 3 的倍数 (具体证明因为太简单而被屏蔽). 于是我们就可以在每个点维护从它开始的后 ...

  4. PyTorch学习问题记录

    Q1:def train() 中的model.train()的作用是什么?为什么要写? A1:class torch.nn.Module中 train(mode=True) Sets the modu ...

  5. 邁向IT專家成功之路的三十則鐵律 鐵律二十七 IT人夢想之道-實踐

    有句話說:「人因夢想而偉大」.身為IT的您不知道夢想為何?是希望能夠環遊世界.開一間咖啡廳.買一部法拉利跑車.買一部重機.中大樂透頭彩.娶心目中的女神當老婆,還是只要明天還能活著就好了.無論您的夢想為 ...

  6. 【java】httpclient的使用之java代码内发送http请求

    场景: 需要本项目发送HTTP请求到另一个项目中,处理完成返回值给本项目. 1.本项目引入架包 <!-- httpclient 后台发送http请求--> <dependency&g ...

  7. linux 和网络安装 linux

    接触linux 一年了,一直没有总结过什么东西.在开学前的这么几天把之前做的一些东西重新整理一下吧. 或许还会有别的收获呢. linux安装: 去年10月份接触linux以来安装不下数十次,不管是光盘 ...

  8. 学会用core dump调试程序错误

    最来在项目中遇到大型程序出现SIGSEGV ,一直不知道用core dump工具来调试程序,花了近一周的时间,才定位问题,老大很生气,后果很严重,呵呵,事后仔细学习了这块的知识,了解一点core du ...

  9. jquery_ajax 入门实例

    序:本文通过几个小样例,简单介绍怎样使用jqueryAjax异步载入. 1. $(selector).load(url,[data],[callback]) :加载远程HTML文件代码并插入DOM中. ...

  10. 【Hibernate步步为营】--核心对象+持久对象全析（三）

    上篇文章讨论了Hibernate持久对象的生命周期,在整个生命周期中一个对象会经历三个状态,三种状态的转换过程在开发过程中是可控的.并且是通过用法来控制它们的转化过程.详细的转化过程今天就来着重讨论下 ...