一、异步请求

在之前我们请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源。但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异步请求来实现这种局部数据刷新的要求,异步请求简称 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. sublime 配置过程

    https://www.cnblogs.com/chengqi521/p/7600379.html

  2. 剑指offer字符串列表

    字符串 面试题5:替换空格 面试题20:表示数值的字符串 面试题58:翻转字符串 面试题58(二):左旋转字符串

  3. oracle dmp文件导出与导入

    ORACLE 10g导入 ORACLE 11g 一.expdp.sh导出dmp文件export PATH=$PATH:$HOME/binexport ORACLE_BASE=/oracleexport ...

  4. type=file的inpu美化，自定义上传按钮样式

    <div class="div1"> <div class="div2">点击上传</div> <input type ...

  5. Java线程池ExecutorService 代码备忘

    ExecutorService fixedThreadPool = Executors.newFixedThreadPool(5)创建一个定长线程池,可控制线程最大并发数,超出的线程会在队列中等待 p ...

  6. Redis数据类型List

    Redis的List是通过Linked List(链表)来实现的String集合,所以插入数据的速度很快.但是缺点就是在数据量比较大的时候,访问某个数据的时间可能会很长,但针对这种情况,可以使用Sor ...

  7. JSONP ---------跨域

    什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首 ...

  8. net core体系-web应用程序-4asp.net core2.0 项目实战（1）-10项目各种全局帮助类

    本文目录 1.  前沿2.CacheHelper基于Microsoft.Extensions.Caching.Memory封装3.XmlHelper快速操作xml文档4.SerializationHe ...

  9. java代码获取多边形的中心点

    package com.skjd.util; import java.util.ArrayList; import java.util.List; /** * 坐标以及电子围栏相关的工具类 * @au ...

  10. git操作：WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! （警告:远程主机标识已更改!）

    问题背景: 前几日,把云服务器系统由centos改成Ubuntu之后,重新搭建的git服务器环境. 问题描述: 从本机不能clone远程git仓库. 报错如下: @@@@@@@@@@@@@@@@@@@ ...