jquery $.ajax()用法详解post、get综合实例2017-09-11 21:11
以前没有接触jquery的时候,要使用ajax还要自己写相关的代码。
有了jquery就再也不用那么麻烦了,直接使用就可以。
今天我们就来讲讲$.ajax()用法。
实例1 html代码
通过 AJAX 改变文本
$("#btn1").click(function(){
//取Ajax返回结果
//为了简单起见,我们就简单的从文件中读取内容作为返回数据
var html=$.ajax({url:"source/santii.htm",async:false});
//将Ajax返回结果填充到divbox
$("#divbox").html(html.responseText);
});
亲自测试一下
实例2
从表单提交数据,经过php处理再返回结果。 html代码
姓名:
年龄:
$("#btn2").click(function(){
var url="{source}/file/php/demo_form_ajax.php"
var params = $("#form1").serialize();
alert(url+"?"+params);
$.ajax({
url: url,
type: 'get',
data: params,
dataType:'jsonp',
jsonp:'jsoncallback',
success: function (data) {
$(".phpajaxget").html(data.html);
}
});
});
亲自测试一下
上面从表单提交的实例,我们用的是get方法,你也可以改为post提交。
对应的type改为post。
type:"post"
然后php文件里面也需要将$_GET改为$_POST接收数据。
详细解一下上面用到的一些使用细节。
url:对传入的数据进行处理的文件地址。
data:表单数据。在这里data我们也可以写成下面这样。
data: "name=张小三&age=18"
type:提交方式,有post和get两种。
dataType:可以指定其他不同数据处理方式,除了单纯的XML,还可以指定html、json、jsonp、script或者text。
jsonp:因为三体教程的实例,在手机端也需要运行,所以需要用到ajax跨域,因此这里设置回调函数jsoncallback。
最后说明一下,success: function(data)里面的data不是一定要这样写,也并不是上面"data: params"这里的data,你可以写成任意的名称。
只是在获取数据的时候,要对应上不要写错了。
今天分享的jquery $.ajax()用法详解之post、get综合实例希望对小伙伴有帮助,以后有什么新的技巧、方法再在这里进行更新。