jQuery中Ajax使用

最新推荐文章于 2024-08-09 17:26:52 发布

一个可爱的姑娘

最新推荐文章于 2024-08-09 17:26:52 发布

阅读量180

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/yin_xing_ye/article/details/89501905

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录