jQuery中Ajax使用

 

jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()、$.post()方法,第3层是$.getScript()、$.getJSON()方法

1、load()方法  

通常用来从WEB服务器上获取静态的数据文件

最常用的Ajax方法,能载入远程HTML代码并插入DOM中

使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 load() 方法即可

load(url,args,function);

  • url:String    请求HTML页面的URL地址
  • args:Object    发送至服务器的key/value数据
  • function: 请求完成时的回调函数,无论请求成功或失败
$(function(){
var url="test.html";
	$("#send").click(function(){
		$("#resText").load(url);
	})
})

 load()传递方式根据参数data指定,没有参数 为GET,有的话为POST 

 可以对返回结果进行筛选

url="test.html .detail";对class属性进行选择,结果只会返回<p class="detail">abcdefg</p>里的内容

url="test.html  h1";对标签进行选择 ,结果返回<h1>啦啦</h1>里的内容

test.html

<div class="message">
	<h1>啦啦</h1>
	<p class="detail">abcdefg</p>
</div>

2.$.get()和$.post()方法  

2.1$.get()   使用GET方式来进行异步请求 

$.get(url,args,function,type);

请求返回的数据格式 html ,xml,json处理

1.少量的html代码时,可以在页面上直接输出 

 

  • url:String    请求HTML页面的URL地址
  • args:Object    发送至服务器的key/value数据会作为QueryString附加到请求URL中
  • function    载入成功时回调函数(只有当response的返回状态是success才调用该函数)自动将请求结果和状态传递给该方法
  • type:服务器返回内容的格式,包括html、xml、script、json、text、_default
$(function(){
	$(":input[name='user']").change(function(){
		var val=$(this).val();
		val=$.trim(val);
		if(val!=""){
			var url="XXX";
			var args={"user":val,"time":new Date()};
			$.get(url,args,function(date){
				$("#message").html(date);//把返回的数据直接添加到页面上
			})
		}
	})
})
<body>
<form action="" method="post">
	username:<input type="text"  name="user">
	<div id="message"> </div>
    <input type="submit" value="Submit">
</form>
</body>

 2.json数据,type为"JSON"

json数据相当于是一个对象,下面是它的取值方式

$.get(ur1, args, function(data){
    var employeeid=data.employeeid;
    var name=data.name;
    var emile=data.emile;
    var salary=data.salary;
    $("#id").text(employeeid);
    $("#name").text(name);
    $("#emile").text(emile);
    $("#salary").text(salary);
    $("#emdetail").show();
}, "JSON");

Ajax传输数据的3狆方式:

1). XML:笨重,解析困雅.但XML是通用的数据交换格式,当远程未知时用XML

2). HTML:不需要解析可以直接放到文档中.适用更新一部分区域· 但传输的数据不是很方便,且HTML代码需要排装完成.

3). JSON: 小巧,有面向対象的特征,且有很多第三方 的jar包可以把Java対象或集合特内JSON字符串.

 2.2 $.post() 通过 HTTP POST 请求从服务器上请求数据

$.post(url,args,function);

get和post对比

  • GET方式对传输的数据有大小限制,而使用POST方式传输的数据大小可以说不受限制。
  • GET方式请求的数据会被浏览器缓存起来,而POST 请求不会被缓存
  • POST请求比较安全,参数不会被保存在浏览器历史或 web 服务器日志中。还有GET会把传输的值直接显示出来,POST不会

3. $.getJSON() 

 用于加载json,文件,相当于

$.get(ur1, args, function(data){


}, "JSON");

var url="XXX";
var args={"empid":empid,"time":new Date()};
$.getJSON(url,args,function(data){
				
  })
 }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值