一、异步请求

在之前我们请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源。但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异步请求来实现这种局部数据刷新的要求,异步请求简称 Ajax(Asynchronous Javascript And XML),在之前一般使用js 发送异步请求,请求的数据一般是xml,但是现在 json 出现之后就不使用xml 做为数据传输格式标准了。使用jQuery 发送异步请求,jq中的异步请求发送有很多方式，常见的方式如下:

1、方式一

  1. $.get( //发送一个get 请求
  2.  
  3.    "test.cgi",//请求的地址
  4.  
  5.    {name: "John", time:"2pm" }, //传递服务端的数据
  6.  
  7. 　　function(data){ //回调函数,当请求成功之后,会自动调用该函数,data 服务端返回给客户端数据
  8.  
  9. 　　alert("Data Loaded: " + data);
    　　},
  10.  
  11. "json"); //表示请求的数据格式是json格式
  12.  
  13. <script type="text/javascript" src="js/jquery.min.js"></script>
  14.  
  15. <Script type="text/javascript" src="js/login.js"></script>
  16.  
  17. </head>
  18.  
  19. <body>
  20.  
  21. <a href="javascript:void(0)">取得一个雇员信息</a>
  22.  
  23. $(function(){
  24.  
  25. 　　// 为超链接绑定事件,点击之后会发送请求
  26.  
  27. 　　$("a").click(function(){
    　　//发送请求
  28.  
  29. 　　$.get(
  30.  
  31. 　　"emp/get",
  32.  
  33. 　　{"id":7788}, function(data){
  34.  
  35. 　　lalert("服务器端返回的数据是:"+data);
    　　},
  36.  
  37. "json")
      })
    })

2、方式二

  1. $.getJSON(//发送一个get 请求,但是只接受 json 格式的响应数据
  2. 　　"test.js",
  3. 　　{ name: "John" time: "2pm" }
  4. 　　function (json) {
  5. 　　　　alert("JSON Data:" + json.users [3].name);
  6. })
  1. $(function(){
  2. 　　// 为超链接绑定事件,点击之后会发送请求
  3. 　　$("a").click(function(){
  4. 　　// 发送请求
  5. 　　$.getJSON(
  6. 　　　　"emp/get",
  7. 　　　　{"id":7788},
  8. 　　　　function(data){
  9. 　　　　　　alert("服务器端返回的数据是:"+data);
  10.  　　　　})
    　　})
    })

使用getJSON 方式,默认取得数据就是json数据,不需要明确指定出来。 如果客户端指定了要取得 json 数据则服务器端必须返回的值也是json格式的字符串数据。

4、方式三

  1. $.ajax({
  2.     //发送一个请求
  3.     type:"POST", //指定请求类型
  4.     url:"some.php", //请求地址
  5.     data: "name=John&location=Boston", //传递的数据
  6.     dataType:"json", //指定接收的数据类型(需要服务器端传递的数据类型)
  7.     async: false, // 实现在请求没有完全处理之前锁定浏览器,不做后面的操作
  8.     Success: function(msg){ //回调函数
  9.     alert ( "Data Saved: " + msg );
  10.     // 其他代码
  11. });
  1. $(function() {
  2.     // 为超链接绑定事件,点击之后会发送请求
  3.     var emp;
  4.     $("a").click(function(){
  5.     //发送请求
  6.         $.ajax({
  7.             type:"post",
  8.             url:"emp/get",
  9.             data:"id=7788",
  10.             dataType:"json",
  11.             success:function(data){
  12.             emp=data;
  13.         })
  14.     alert(emp.ename);
  15.     })
  16. })

此时出现了emp 没有 ename 属性,原因是先执行了“alert(emp.ename)”代码请求才处理完毕,应该要求先把请求处理完毕之后再访问 emp.ename 才可以实现正确的操作,那么应该让请求同步(现在是异步的)

指定请求同步

  1. $(function(){
  2.     //为超链接绑定事件,点击之后会发送请求
  3.     var emp;
  4.     $("a").click(function(){
  5.     // 发送请求
  6.         $.ajax({
  7.             type:"post", url:"emp/get",
  8.             data:"id=7788",
  9.             dataType:"json",
  10.             async:false, //锁定浏览器,只有请求处理完毕之后(回调函数调用完毕之后)才能执行后面的代码
  11.             success: function(data) {
  12.                 emp=data;}
  13.             })
  14.     alert(emp.ename);
  15.     }）
  16. }）

异步请求取得json数据的更多相关文章

  1. 【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回

    作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...

  2. 异步请求获取JSON数据

    json格式的数据广泛应用于异步请求中前后端的数据交互,本文主要介绍几种使用场景和使用方法. <script type="text/javascript"> funct ...

  3. 自己构造用于异步请求的JSON数据

    有时候.serialize()或者.serializeJSON()莫名其妙的不能按照我们的要求将数据序列化. 或者其他什么问题然我们需要自己惊醒JSON数据的构造.因为js对JSON的支持做的比较好, ...

  4. PHP/Post 提交请求获取json数据，并转化为所需要的数组

    /** * Post 提交请求获取json数据,并转化为所需要的数组 */ function request_post($url = '', $param = '') { if (empty($url ...

  5. 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法

    在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...

  6. 【VueJS】VueJS开发请求本地json数据的配置

    VueJS开发请求本地json数据的配置,旧版本是build/dev-server.js,新版本是build/webpack.dev.conf.js. VueJS开发请求本地json数据的配置,早期的 ...

  7. shiro异步请求返回JSON响应

    shiro异步请求返回JSON响应 需求1:当shiro请求资源,但是没有进行认证时,默认是进行重定向,现在需要返回JSON响应.注意异步请求,服务器重定向后,ajax拿到的是浏览器重定向后的到的页面 ...

  8. Nginx下HTML页面POST请求静态JSON数据返回405状态

    在浏览器访问HTML页面,发现一些静态JSON数据没有显示,F12查看,如下图所示: 可以看到请求方式为POST 将请求链接复制在浏览器地址栏访问,可以正常请求到数据 F12查看,可以看到请求方式为G ...

  9. Beego框架POST请求接收JSON数据

    原文: https://blog.csdn.net/Aaron_80726/article/details/83870563 ------------------------------------- ...

随机推荐

  1. Team Queue （HDU:1387）

    Queues and Priority Queues are data structures which are known to most computer scientists. The Team ...

  2. 创建Node.js TypeScript后端项目

    1.安装Node.js扩展,支持TypeScript语法 npm install -g typescript   npm install -g typings 2.创建项目目录project_fold ...

  3. OpenCV-Python教程9-平滑图像

    先解释一个单词 blur:使...模糊不清 滤波与模糊 滤波和模糊都属于卷积,不同的滤波方法之间只是卷积核不同(对线性滤波而言) 低通滤波器是模糊,高通滤波器是锐化 低通滤波器允许低频信号通过,在图像 ...

  4. table行颜色设置

    function renderingTable(obj){    $(obj).each(function(){        //设置奇数行颜色        $(this).find(" ...

  5. 利用BootStrap Table插件实现自己的弹出框分页。

    参考链接1:    官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/        开始使用:http://bootstrap-table. ...

  6. 一起学爬虫——通过爬取豆瓣电影top250学习requests库的使用

    学习一门技术最快的方式是做项目,在做项目的过程中对相关的技术查漏补缺. 本文通过爬取豆瓣top250电影学习python requests的使用. 1.准备工作 在pycharm中安装request库 ...

  7. 一起学Hive——总结常用的Hive优化技巧

    今天总结本人在使用Hive过程中的一些优化技巧,希望给大家带来帮助.Hive优化最体现程序员的技术能力,面试官在面试时最喜欢问的就是Hive的优化技巧. 技巧1.控制reducer数量 下面的内容是我 ...

  8. ABP给WebApi添加SwaggerUI,生成可交互接口文档

    在ABP模板项目中,通过SwaggerUI可以为我们的WebApi生成动态的可交互接口文档页面,从而可以很方便的测试调用我们的WebApi接口. 一.集成Swagger 右键项目YoYo.Web,打开 ...

  9. Scrapy 框架

    1. 基本使用 1.1 定义及安装 为了爬取网站数据,提取结构性数据而编写的应用框架 scrapy组件工作流程 引擎首先会将爬虫文件中的起始url获取,并且提交到调度器中.如果需要从url中下载数据, ...

  10. 机器学习——线性回归-KNN-决策树(实例)

    导入类库 import numpy as np import pandas as pd from sklearn.linear_model import LinearRegression from s ...