文章目录

jquery $.ajax()用法详解post、get综合实例

以前没有接触jquery的时候,要使用ajax还要自己写相关的代码。

有了jquery就再也不用那么麻烦了,直接使用就可以。

今天我们就来讲讲$.ajax()用法。

实例1

html代码<div id="divbox"><h2>通过 AJAX 改变文本</h2></div>
<input id="btn1" type="button" value="Ajax修改内容" />
<script>
$("#btn1").click(function(){
    //取Ajax返回结果
    //为了简单起见,我们就简单的从文件中读取内容作为返回数据
    var html=$.ajax({url:"source/santii.htm",async:false});
    //将Ajax返回结果填充到divbox
    $("#divbox").html(html.responseText);
});
</script>
亲自测试一下

实例2

从表单提交数据,经过php处理再返回结果。

html代码<form name="form1" id="form1">
<div class="phpajaxget">
    <p>
    姓名:<input type="text" name="name" />
    </p>
    <p>
    年龄:<input type="text" name="age" />
    </p>
</div>
<p>
<input id="btn2" type="button" value="提交" />
</p>
</form>
<script>
$("#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);
		}
	});
});
</script>
亲自测试一下

上面从表单提交的实例,我们用的是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综合实例希望对小伙伴有帮助,以后有什么新的技巧、方法再在这里进行更新。

本文网址:http://www.santii.com/article/49.html


数据更新时间:2018-10-16