代码：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8" />
-
<title>AjAX请求</title>
-
<link rel="stylesheet" href="css/1.css" />
-
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
-
<script type="text/javascript" src="js/1.js"></script>
-
</head>
-
<body>
-
<div id="name"></div>
-
<div id="age"></div>
-
<div id="num"></div>
-
<div id="sys"></div>
-
<div id="manu"></div>
-
<div id="sex"></div>
-
-
<input type="text" id="inputname"/>
-
</body>
-
</html>
-
*{
-
margin: 0;
-
-
padding: 0;
-
}
-
#name{
-
width: 100px;
-
height: 40px;
-
background: black;
-
color: white;
-
text-align: center;
-
line-height: 40px;
-
}
-
#age{
-
width: 100px;
-
height: 40px;
-
background: black;
-
color: white;
-
margin-top: 20px;
-
text-align: center;
-
line-height: 40px;
-
}
-
#num{
-
width: 100px;
-
height: 40px;
-
background: black;
-
color: white;
-
margin-top: 20px;
-
text-align: center;
-
line-height: 40px;
-
}
-
#manu{
-
width: 100px;
-
height: 40px;
-
background: black;
-
color: white;
-
margin-top: 20px;
-
text-align: center;
-
line-height: 40px;
-
}
-
#sex{
-
width: 100px;
-
height: 40px;
-
background: black;
-
color: white;
-
margin-top: 20px;
-
text-align: center;
-
line-height: 40px;
-
}
-
#sys{
-
width: 100px;
-
height: 40px;
-
background: black;
-
color: white;
-
margin-top: 20px;
-
text-align: center;
-
line-height: 40px;
-
}
-
window.onload = function(){
-
-
-
$(function(){
-
-
$("#inputname").blur(function(){
-
var newData = $("#inputname").val();
-
$("#inputname").val(null);
-
$.ajax({
-
//请求类型
-
type:"get",
-
//地址
-
url:"new_file.json",
-
//是否同异步
-
async:true,
-
-
data :{
-
name:newData
-
},
-
complete:function(data){
-
// alert("你好");
-
},
-
success:function(data){
-
$("#name").html(data.username),
-
$("#age").html(data.age),
-
$("#num").html(data.num),
-
$("#sys").html(data.system),
-
$("#manu").html(data.manufacturers),
-
$("#sex").html(data.sex)
-
-
}
-
});
-
-
-
});
-
-
-
-
});
-
}
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 读取的页面不被缓存，因此 中的 cache 和 ifModified 选项不会影响这些请求。
注释：由于浏览器安全方面的限制，大多数 "Ajax" 请求遵守同源策略；请求无法从不同的域、子域或协议成功地取回数据。
注释：如果由 jQuery.post() 发起的请求返回错误代码，那么不会有任何提示，除非脚本已调用了全局的 。或者对于 jQuery 1.5，jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。
阅读(510) | 评论(0) | 转发(0) |
