第六回 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的封装,还有几个简洁的写法,等下次再写,写个续集!

感谢阅读!

posted @   sjkzy  阅读(110)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示