Oct 29th-jQuery的异步请求

1.使用load()方法异步请求数据

使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:

load(url,[data],[callback])

参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head>
 4         <title>使用load()方法异步请求数据</title>
 5         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
 6         <link href="style.css" rel="stylesheet" type="text/css" />
 7     </head>
 8
 9     <body>
10         <div id="divtest">
11             <div class="title">
12                 <span class="fl">我最爱吃的水果</span>
13                 <span class="fr">
14                     <input id="btnShow" type="button" value="加载" />
15                 </span>
16             </div>
17             <ul></ul>
18         </div>
19
20         <script type="text/javascript">
21            /*
22         调用load()方法加载服务器文件 http://www.imooc.com/data/fruit_part.html 中全部的li元素内容。
23         */
24
25             $(function(){
26                 $("#btnShow").bind("click",function(){
27                     var $this=$(this);
28                     $("ul").html("<img src=‘Images/Loading.gif alt=‘‘/>")
29                     .load("http://www.imooc.com/data/fruit_part.html",function(){
30                         $this.attr("disabled",true);
31                     })
32                 });
33             })
34         </script>
35     </body>
36 </html>            

2.使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为:

jQuery.getJSON(url,[data],[callback])$.getJSON(url,[data],[callback])

其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。

            $(function(){
                $("#btnShow").bind("click",function(){
                    var $this=$(this);
                    $.getJSON("http://www.imooc.com/data/sport.json",function(data){
                       $this.attr("disabled","true");
                       $.each(data, function (index, sport) {
                            if(index==3)
                            $("ul").append("<li>" + sport["name"] + "</li>");
                        });
                    });
                });
            });

ps:$(selector).each()是对元素进行遍历,而$.each()是对某个数组进行遍历

3.使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示:jQuery.getScript(url,[callback])$.getScript(url,[callback])

参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

4.使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下:$.get(url,[callback])

参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

$(function(){
                $("#btnShow").bind("click",function(){
                    var $this=$(this);
                    $.get("http://www.imooc.com/data/info_f.php",function(data){
                        $this.attr("disabled","true");
                        $("ul").append("<li>我的名字叫:"+data.name +"</li>");
                        $("ul").append("<li>男朋友对我说:"+data.say+"</li>");
                    },"json");
                });
            })

$.get(url,[data],[callback],[type]) ,url:待载入页面的 URL 地址。 data:要发送的参数key:value(以json格式发送)。 callback:请求成功时调用的函数。 type:返回内容格式,xml, html, script, json, text, _default 。

5.post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面,调用格式如下:$.post(url,[data],[callback])

参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。

  $(function(){
                $("#btnCheck").bind("click",function(){
                    $.post("http://www.imooc.com/data/check_f.php",{
                       num:$("#txtNumber").val()
                    },function(data){
                       $("ul").append("<li>你输入的<b>  "
                        + $("#txtNumber").val() + " </b>是<b> "
                        + data + " </b></li>");
                    });
                });
            });
时间: 2024-12-29 11:21:32

Oct 29th-jQuery的异步请求的相关文章

jQuery ajax 异步请求

jQuery - AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. 什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示. 关于 jQuery 与 AJAX jQuery 提供多个与 AJAX 有关的方法. 通过 jQuery AJAX 方法,您能够使用 HTTP Get

使用jQuery发送异步请求

具体格式如下 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":"

jQuery实现异步请求

1:jQuery语法 $(function(){ $('#searchbtn').click(function(){ $.ajax({ type: "GET" , url:"JSONsever.php?number=" + $('#keyword').val(), dataType :"json", success : function(data){ if(data.success) { $('#search_result').html(data

Jquery异步请求Action返回JSON

转载请注明出处:jiq?钦's technical Blog 最近在自己写分布式注册中心的Web管理界面,需要点击左边树节点时,请求后台Action查询该节点的详细数据,然后异步刷新右边的节点信息区域. 异步刷新用了Jquery对Ajax的封装: function zTreeOnClick(event, treeId, treeNode) { $.ajax({ type: "POST", url: "Config.action", data: ""

关于jquery同步和异步请求问题总结

关于jquery同步和异步请求问题总结 问题 这几天做项目的时候,写脚本遇到一个问题,就是jquery异步请求和同步请求执行顺序不按代码顺序执行而是最后执行导致添加数据报错,添加到空值,这怎么忍,于是我去查找jquery api,终于知道了原来jquery默认异步请求,防止数据卡死,终于让我找到了这货 async,当async: true 时,ajax请求是异步的.当async : true 时,就是同步的,但是我又有个问题,怎么设置,这个在哪设置,用$.ajax去写这个操作,不,不太麻烦了,到

学习笔记12JS异步请求

*一般用JS来监听按钮事件,都应该先监听页面OnLoad事件. *Js写在哪里,就会在页面解析到哪里执行. 异步请求:所谓异步请求,就是使用JS来监听按钮点击事件,并且发送请求,等到回复后,再使用JS来进行页面跳转,或动态改变页面.使用场合:当请求是ashx是,都可以使用异步方法,页面就无需刷到ashx的一个空白页面或者不用于展示的页面了. *使用jquery发送异步请求:$("#按钮ID").Click(fuction(){ $.get( "页面URL.ashx"

Ajax异步请求(二)

业精于勤,荒于嬉:行成于思,毁于随. ----致自己 目录: 二.jQuery四种常用的Ajax请求方式简介 1.$.ajax() 2.$.get() 3.$.post() 4.$.getJSON() ==================1.$.ajax()======================== jQuery在异步请求方面封装的较好,直接使用Ajax比较麻烦,jQuery大大简化了我们的使用,不用考虑浏览器之间的差异了. $.ajax()是jQuery底层ajax的实现,$.get()

记录学习MVC过程,MVC异步请求(五)

1.基与jquery的异步请求 <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function() { $("#btn_jquery").click(function() { $.ajax({ url: "/Users/Getdata", type: "

MVC&amp;WebFomr对照学习:ajax异步请求

写在前面:由于工作需要,本人刚接触asp.net mvc,虽然webform的项目干过几个.但是也不是很精通.抛开asp.net webform和asp.net mvc的各自优劣和诸多差异先不说.我认为虽然mvc和webform有诸多不同,但是也只是为了达到相同的目的而在各自的机制下采取了不同的手段而已.更何况它们都是基于asp.net框架的.因此在解决mvc开发过程中的问题时,我很容易联想到在webform下同样的问题是如何解决的.以此来作为对照.我姑且把这种方法叫做迁移学习法吧.我以"小孩之

异步请求取得json数据

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