一 进行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. Tavas and Malekas

    题面 题目描述 给你两个字符串a和b,告诉所有你b在a中一定匹配的位置,求有中不同的字符串a.a的长度为n,b的长度为m,一定匹配的位置有p个.若b在a中的一定匹配的位置为x,说明a[x-x+m-1] ...

  2. oracle 树查询

    select LPAD('-----',t.menu_level)||t.obj_id,t.*,rowid from imes10dba.tb_adm_menu t start with t.pare ...

  3. K-L变换

    K-L变换( Karhunen-Loeve Transform)是建立在统计特性基础上的一种变换,有的文献也称为霍特林(Hotelling)变换,因他在1933年最先给出将离散信号变换成一串不相关系数 ...

  4. IDG | 四则运算表达式计算

    分析 首先将中缀表达式转换为后缀表达式(逆波兰式),然后使用栈进行计算. 没有考虑括号.小数. 代码 import java.util.LinkedList; import java.util.Lis ...

  5. 转：国内外著名开源b2c电子商务系统比较包括asp.net和php

    from: http://longdick.iteye.com/blog/1122879 国内外著名开源b2c电子商务系统比较包括asp.net和php 博客分类: 电子商务   国内外著名开源b2c ...

  6. C#中如何让ListView控件点击选中整行

    将Listview控件的FullRowSelect属性置为True,当然Listview的View属性应该是Details. 2017年6月25日17:15:55

  7. UVA - 1416 Warfare And Logistics (最短路)

    Description The army of United Nations launched a new wave of air strikes on terroristforces. The ob ...

  8. git 强制覆盖,分支合并

    强制合并 git fetch --all && git reset --hard origin/master && git pull 合并代码 git commit - ...

  9. Cookie学习笔记二：Cookie实例

    今天说说刚刚学到的两个Cookie的最经典应用:自己主动登录和购物车设置 一:自己主动登录 须要两个页面:login.jsp与index.jsp,login.jsp用来输出登录信息,index.jsp ...

  10. 【每日Scrum】第五天（4.15） TD学生助手Sprint1站立会议

    TD学生助手Sprint1站立会议(4.15) 任务看板 站立会议内容 组员 昨天 今天 困难 签到 刘铸辉 (组长) 今天和静姐,娇哥把图片3D画廊效果的功能实现了,GPS功能没什么进展,所以只能继 ...