jQuery对Ajax的支持

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>



  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值