jQuery对Ajax的支持
-$.ajax()-->XMLHttpRequest
$.ajax({url:地址,
type:请求类型,
data:提交数据,
async:同步|异步,
dataType:服务器返回数据类型,
success:成功回调函数,
error:错误回调函数
});
代码示例:
<html>
<head>
<title>demo3.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="scripts/jquery.min.js">
</script>
<script type="text/javascript">
//页面载入后,发送ajax请求加载城市
$(function(){//等价于onload
//$.ajax
$.ajax({
url:"cities.do",
type:"get",
dataType:"json",
success:function(data){
//data就是服务器返回的JSON结果
//由于dataType为json,所以data已经是JSON类型了
for(var i=0;i<data.length;i++){
var id = data[i].id;//获取城市ID
var name = data[i].name;//获取城市名
//拼一个option字符串
var str = "<option value='"+id+"'>"
+name+"</option>";
//添加到id=s1的select中
$("#s1").append(str);
}
},
error:function(){
alert("加载数据失败");
}
});
});
</script>
</head>
<body>
城市:<select id="s1"></select>
</body>
</html>
-$.get()-->$.getJSON()-->$.getScript()
$.get(地址,提交数据,成功回调函数,返回数据类型)-$.post()
-对象.load()
DIV对象.load(地址,提交数据,回调函数)
采用ajax请求加载一个内容,内容返回后自动将内容添加到DIV对象里。默认回调处理:DIV对象.html(内容);
发送ajax请求--》服务器返回内容--》默认回调处理--》回调函数
代码示例:
<html>
<head>
<title>$.get</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="scripts/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
//发送ajax
$.getJSON("cities.do",
function(data){
for(var i=0;i<data.length;i++){
var id = data[i].id;
var name = data[i].name;
var str = "<option value='"+id+"'>"
+name+"</option>";
$("#s1").append(str);
}
});
});
</script>
</head>
<body>
城市:<select id="s1"></select>
</body>
</html>