一、异步请求

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

1、方式一

$.get( //发送一个get 请求

   "test.cgi",//请求的地址

   {name: "John", time:"2pm" }, //传递服务端的数据

　　function(data){ //回调函数,当请求成功之后,会自动调用该函数,data 服务端返回给客户端数据

　　alert("Data Loaded: " + data);
　　},

"json"); //表示请求的数据格式是json格式

<script type="text/javascript" src="js/jquery.min.js"></script>

<Script type="text/javascript" src="js/login.js"></script>

</head>

<body>

<a href="javascript:void(0)">取得一个雇员信息</a>

$(function(){

　　// 为超链接绑定事件,点击之后会发送请求

　　$("a").click(function(){
　　//发送请求

　　$.get(

　　"emp/get",

　　{"id":7788}, function(data){

　　lalert("服务器端返回的数据是:"+data);
　　},

"json")
  })
})

2、方式二

$.getJSON(//发送一个get 请求,但是只接受 json 格式的响应数据

　　"test.js",

　　{ name: "John" time: "2pm" }

　　function (json) {

　　　　alert("JSON Data:" + json.users [3].name);

})
$(function(){

　　// 为超链接绑定事件,点击之后会发送请求

　　$("a").click(function(){

　　// 发送请求

　　$.getJSON(

　　　　"emp/get",

　　　　{"id":7788},

　　　　function(data){

　　　　　　alert("服务器端返回的数据是:"+data);

 　　　　})
　　})
})

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

4、方式三

$.ajax({

    //发送一个请求

    type:"POST", //指定请求类型

    url:"some.php", //请求地址

    data: "name=John&location=Boston", //传递的数据

    dataType:"json", //指定接收的数据类型(需要服务器端传递的数据类型)

    async: false, // 实现在请求没有完全处理之前锁定浏览器,不做后面的操作

    Success: function(msg){ //回调函数

    alert ( "Data Saved: " + msg );

    // 其他代码

});
$(function() {

    // 为超链接绑定事件,点击之后会发送请求

    var emp;

    $("a").click(function(){

    //发送请求

        $.ajax({

            type:"post",

            url:"emp/get",

            data:"id=7788",

            dataType:"json",

            success:function(data){

            emp=data;

        })

    alert(emp.ename);

    })

})

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

指定请求同步

$(function(){

    //为超链接绑定事件,点击之后会发送请求

    var emp;

    $("a").click(function(){

    // 发送请求

        $.ajax({

            type:"post", url:"emp/get",

            data:"id=7788",

            dataType:"json",

            async:false, //锁定浏览器,只有请求处理完毕之后(回调函数调用完毕之后)才能执行后面的代码

            success: function(data) {

                emp=data;}

            })

    alert(emp.ename);

    }）

}）

异步请求取得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. windows下的node环境搭建

    node环境的搭建过程: 1.首先在nodejs.org官网上下载一个msi安装文件,安装(过程很简单,基本上是一路next) 2.安装完成后,简单测试下是否安装成功,在cmd下输入两个命令: nod ...

  2. Ubuntu-linux云服务器下安装开启虚拟环境失败解决办法

    为什么要安装虚拟环境? 1.某些项目需要安装旧的包,开发相应功能 2.项目开发时,安装部分环境不希望影响整机环境 如何安装? 首先安装python 安装pip工具 sudo apt-get insta ...

  3. IntelliJ IDEA运行eclipse的web项目报错的问题

    用IDEA已经有一段时间了, 由于之前的IDEA版本不支持Tomcat服务器, 所以很长一段时间web项目都是由eclipse开发调试. 今天闲来无事下载了一个最新版的IDEA, 按网上的教程, 尝试 ...

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

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

  5. .NET Core 添加Java 服务引用(WebService) 曲折历程(一)

    背景: 需要在HangFire定时任务中加入请求Java开发的WebService接口.定时获取数据同步数据.现有的代码是在VS2017 ,.Net Core 下创建的,添加WS发现系统不支持. 在C ...

  6. mybatis 开发规范

  7. python运算符——逻辑运算符

    not命令是取反命令,真的变成假的,假的变成真的(True是真的,False是假的) b = Trueprint(not b) 原本是真的,但是加了“not”指令就变成了假的,not指令是一元运算符, ...

  8. 07-Python入门学习-字符编码与文件处理

    字符编码 人操作计算机使用人类认识的字符,而计算机存放都是二进制数字所以人在往计算机里输入内容的时候,必然发生: 人类的字符------(字符编码表)-------->数字 比如我输入一个‘上’ ...

  9. [POJ1050]To the Max (矩阵,最大连续子序列和)

    数据弱,暴力过 题意 N^N的矩阵,求最大子矩阵和 思路 悬线?不需要.暴力+前缀和过 代码 //poj1050 //n^4暴力 #include<algorithm> #include& ...

  10. Java 标记接口

    没有声明或定义方法的接口称为标记接口(Mark Interface).某个类实现该接口时不需要重写方法,表明具有接口标记的功能.Java中常用的3个标记接口如下: 1 Serializable jav ...