一 进行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. Windows Builder（图形化界面的利器）For Eclipse 3.7

    工欲善其事,必先利其器——孔子(春秋)<论语·卫灵公> 今天闲逛论坛的时候,发现了Eclipse 的很好的插件,是关于做图形界面的. 如果想做桌面应用软件,交互界面有点复杂的时候,自己手动 ...

  2. Linux环境下编译JDK

    环境准备 操作系统,ubuntu-14.04.6-desktop-amd64.iso,下载地址:http://59.80.44.100/releases.ubuntu.com/14.04/ubuntu ...

  3. 左偏树 / 非旋转treap学习笔记

    背景 非旋转treap真的好久没有用过了... 左偏树由于之前学的时候没有写学习笔记, 学得也并不牢固. 所以打算写这么一篇学习笔记, 讲讲左偏树和非旋转treap. 左偏树 定义 左偏树(Lefti ...

  4. es6系列-变量的解构赋值

    git地址: https://github.com/rainnaZR/es6-study/tree/master/src/destructuring 变量的解构赋值 变量的解构赋值: 数组, 对象, ...

  5. 邁向IT專家成功之路的三十則鐵律 鐵律三十 IT人成功之道-總結

    時間過得相當快!很榮幸有這個機會能夠在iT邦幫忙鐵人賽的社群網站上,和所有IT人分享「邁向IT專家成功之路的三十則鐵律」,其主要目的只是單純希望每一位辛苦的IT工作者,盡可能可以從這一些經驗分享中,將 ...

  6. MySQL的1067错误

    1.打开my.ini文件,找到default-storage-engine=InnoDB这一行,把它改成default-storage-engine=MyISAM.*** my.ini必须为ansi格 ...

  7. cocos2d-x step by step(2) 鼠标事件，键盘事件，等等事件

    各种小控件加载进去了,那么问题来了,这些东西如何接受事件呢? good job,let us find the answer 首先我们去看文档,官方尼玛有好多文档,而且大,全,详细,感觉还是不错的 h ...

  8. 45个非常有用的Oracle查询语句（转自开源中国社区）

    日期/时间 相关查询 获取当前月份的第一天 运行这个命令能快速返回当前月份的第一天.你可以用任何的日期值替换 “SYSDATE”来指定查询的日期. SELECT TRUNC (SYSDATE, 'MO ...

  9. sql语句 MySQL

    1.操作数据库 (1)创建数据库 CREATE  DATABASE  [IF NOT EXISTS] db_name [create_specification [, create_specifica ...

  10. Java HashMap学习笔记

    1.HashMap数据结构 在java编程语言中,最基本的结构就是两种,一个是数组,另外一个是模拟指针(引用),所有的数据结构都可以用这两个基本结构来构造的,HashMap也不例外.HashMap实际 ...