一 进行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. TopCoder SRM 701 Div2 Problem 900 ThueMorseGame（博弈+预处理）

    题意  Alice和Bob在玩一个游戏,Alice先手. 每次一个人可以从一堆式子中拿走任意数量(不超过m)的式子. 取走最后一颗式子的人胜利. 当一个取完某一步的时候剩下的石子数量的二进制表示中1的 ...

  2. 精读《Function Component 入门》

    1. 引言 如果你在使用 React 16,可以尝试 Function Component 风格,享受更大的灵活性.但在尝试之前,最好先阅读本文,对 Function Component 的思维模式有 ...

  3. Django简单粗暴快速发送邮件！

    >>尽管Python已经提供了相对易用的邮件发送模块 smtplib ,但Django仍对其做了轻度的封装.封装后的模块不仅发送邮件速度快,而且在开发环境下也很容易对邮件发送进行测试, 并 ...

  4. android 什么时候call super.onDestory()等

    Methods you override that are part of component creation (onCreate(), onStart(), onResume(), etc.), ...

  5. Codeforces 245G Suggested Friends 暴力乱搞

    G. Suggested Friends time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  6. Ubuntu 16.04安装Wine版的迅雷+QQ（完美方案，终极解决方法）

    安装前先备份好系统! 继上一篇安装QQ的方法http://www.cnblogs.com/EasonJim/p/7425978.html,这一篇的QQ采用的是Wine模式安装.完美解决消息记录中文乱码 ...

  7. 第四章——SQLServer2008-2012资源及性能监控（1）专家

    http://blog.csdn.net/dba_huangzj/article/details/8614817

  8. Concurrency and Application Design (二)

    Dispatch Queues dispatch queues 是基于c机制的一系列自定义任务操作.遵循先进先出的规则.每次只执行一个任务,直到上个任务完成才执行新的任务.相反的,并发的dispatc ...

  9. Android 动态生成对话框和EditText

    /** * (获取输入) */ private void showInputDialog() { ScrollView scrollview = getInitView() ; final Linea ...

  10. 【css】设置div位于浏览器的最底层，离用户最远

    有时候切换发现某块div一直悬浮在最上层,怎么设置div位于浏览器的最底层.离用户最远? <style> .in{ z-index: -1; } </style> 然后引用in ...