JQuery真的不难~第六回 JQ中的异步调用方式

简介:

前言

今天主要讲一下JQ中的异步编程,它将ajax进行封装,在进行异步请求时显得非常容易,无论是GET,POST方式,还是text,xml,javascript,json等数据通讯都是那么的自然

现在,我们就走入jq的ajax的殿堂吧。

 GET请求获取数据
    <script src="http://img1.c2cedu.com/Scripts/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript"> $.ajax({
            type: "GET",
            dataType: "html",
            url: "ajaxData.htm",
            data: {}, //参数信息,采用JS对象的形式,也可以使用URL地址比较传统的&将参数分隔
            error: function () {
                alert("获取数据失败");
            },
            beforeSend: function () {
                alert("发送请求之前出现错误");
            },
            success: function (data) {
                $("#list").html(data)
            }
        });
</script>
ajaxData.htm的内容为:
<ul>
    <li>data:zzl</li>
    <li>infomation:better man</li>
</ul>
 
POST请求操作数据

$.ajax({
  type:'POST',
data:{name:'zzl',email:'bfyxzls@sina.com',addr:'beijing'}, url:
'/ajax/insert.ashx', success: function(data) { if(data.res){ alert('操作成功‘); } } });

注意:AJAX可以跨域发GET请求,来读取数据,但不可以发POST请求,这是正常的,要不就太危险了,呵呵。

$.ajax({
 type:'GET',
 dataType:'jsonp',
 jsonp: "jsonpcallback", //需要与服务端的jsonp字符匹配
url:
'http://www.sina.com/ajax/test.', success: function(data) { $('#result').html(data); } });

对于JQ为AJAX的封装,还有几个简洁的写法,等下次再写,写个续集!

本文转自博客园张占岭(仓储大叔)的博客,原文链接:JQuery真的不难~第六回 JQ中的异步调用方式,如需转载请自行联系原博主。

目录
相关文章
|
5月前
|
JavaScript 前端开发
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
56 0
|
JavaScript
jQuery入门第四章(JQ 事件绑定 )
jQuery入门第四章(JQ 事件绑定 )
105 0
jQuery入门第四章(JQ 事件绑定 )
|
JavaScript 前端开发
jQuery入门第五章(JQ事件类型补充 )
jQuery入门第五章(JQ事件类型补充 )
147 0
|
JavaScript
jQuery入门第三章(JQ 节点操作)
jQuery入门第三章(JQ 节点操作)
84 0
|
JavaScript 前端开发 Android开发
时隔一年多 JQuery 再度发布 3.6.1 新版本,你还在用JQ吗?
在上周(2022-08-26) JQuery 刚更新了一个 3.6.1 维护版本,距离上一个版本发布时间已过去一年零五个月之久......
|
JavaScript 前端开发