Chinaunix首页 | 论坛 | 博客
  • 博客访问: 569554
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: jQuery

2016-09-12 09:12:14


代码:

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>AjAX请求</title>
  6.         <link rel="stylesheet" href="css/1.css" />
  7.         <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
  8.         <script type="text/javascript" src="js/1.js"></script>
  9.     </head>
  10.     <body>
  11.         <div id="name"></div>
  12.         <div id="age"></div>
  13.         <div id="num"></div>
  14.         <div id="sys"></div>
  15.         <div id="manu"></div>
  16.         <div id="sex"></div>
  17.         
  18.         <input type="text" id="inputname"/>
  19.     </body>
  20. </html>


点击(此处)折叠或打开

  1. *{
  2.     margin: 0;
  3.     
  4.     padding: 0;
  5. }
  6. #name{
  7.     width: 100px;
  8.     height: 40px;
  9.     background: black;
  10.     color: white;
  11.     text-align: center;
  12.     line-height: 40px;
  13. }
  14. #age{
  15.     width: 100px;
  16.     height: 40px;
  17.     background: black;
  18.     color: white;
  19.     margin-top: 20px;
  20.     text-align: center;
  21.     line-height: 40px;
  22. }
  23. #num{
  24.     width: 100px;
  25.     height: 40px;
  26.     background: black;
  27.     color: white;
  28.     margin-top: 20px;
  29.     text-align: center;
  30.     line-height: 40px;
  31. }
  32. #manu{
  33.     width: 100px;
  34.     height: 40px;
  35.     background: black;
  36.     color: white;
  37.     margin-top: 20px;
  38.     text-align: center;
  39.     line-height: 40px;
  40. }
  41. #sex{
  42.     width: 100px;
  43.     height: 40px;
  44.     background: black;
  45.     color: white;
  46.     margin-top: 20px;
  47.     text-align: center;
  48.     line-height: 40px;
  49. }
  50. #sys{
  51.     width: 100px;
  52.     height: 40px;
  53.     background: black;
  54.     color: white;
  55.     margin-top: 20px;
  56.     text-align: center;
  57.     line-height: 40px;
  58. }


点击(此处)折叠或打开

  1. window.onload = function(){
  2.     
  3.     
  4.     $(function(){
  5.         
  6.         $("#inputname").blur(function(){
  7.             var newData = $("#inputname").val();
  8.              $("#inputname").val(null);
  9.             $.ajax({
  10.                 //请求类型
  11.                 type:"get",
  12.                 //地址
  13.                 url:"new_file.json",
  14.                 //是否同异步
  15.                 async:true,
  16.                 
  17.                 data :{
  18.                     name:newData
  19.                 },
  20.                 complete:function(data){
  21. //                    alert("你好");
  22.                 },
  23.                 success:function(data){
  24.                     $("#name").html(data.username),
  25.                     $("#age").html(data.age),
  26.                     $("#num").html(data.num),
  27.                     $("#sys").html(data.system),
  28.                     $("#manu").html(data.manufacturers),
  29.                     $("#sex").html(data.sex)
  30.                     
  31.                 }
  32.             });
  33.             
  34.             
  35.         });
  36.         
  37.         
  38.         
  39.     });
  40. }

load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

注释:还存在一个名为 load 的 jQuery    事件方法。调用哪个,取决于参数。

    


load(url,data,function(response,status,xhr))

  该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 
等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。当侦测到成功的响应时(比如,当 textStatus 为 "success" 或 
"notmodified" 时),.load() 将匹配元素的 HTML 内容设置为返回的数据。
$("#result").load("ajax/test.html");
$("#result").load("ajax/test.html", function() {
  alert("Load was performed.");
});




get() 方法通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

$(selector).get(url,data,success(response,status,xhr),dataType)


该函数是简写的 Ajax 函数,等价于:





.load() 方法,与 $.get() 不同,允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格,紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。

$("#result").load("ajax/test.html #container");
果执行该方法,则会取回 ajax/test.html 的内容,不过然后,jQuery 会解析被返回的文档,来查找带有容器 ID 的元素。该元素,连同其内容,会被插入带有结果 ID 的元素中,所取回文档的其余部分会被丢弃。 jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档,并把它插入当前文档。 或元素。结果是,由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。


$.post() 方法使用 HTTP POST 请求从服务器加载数据。

$(selector).post(URL,data,function(data,status,xhr),dataType)


该函数是简写的 Ajax 函数,等价于:

根据响应的不同的 MIME 类型,传递给 success 回调函数的返回数据也有所不同,这些数据可以是 XML 根元素、文本字符串、JavaScript 文件或者 JSON 对象。也可向 success 回调函数传递响应的文本状态。

通过 POST 读取的页面不被缓存,因此 jQuery.ajaxSetup() 中的 cache 和 ifModified 选项不会影响这些请求。

注释:由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。

注释:如果由 jQuery.post() 发起的请求返回错误代码,那么不会有任何提示,除非脚本已调用了全局的 .ajaxError() 方法。或者对于 jQuery 1.5,jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。


阅读(246) | 评论(0) | 转发(0) |
0

上一篇:jQ tab选项卡效果

下一篇:swiper pictureshow

给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册