1. getJSON
var $this = $(this);
$.getJSON("http://www.imooc.com/data/sport.json",function(data){
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
if(index==3)
$("ul").append("<li>" + sport["name"] + "</li>");
});
});
2.get $.get(url,[callback])
参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。
$.get('http://www.imooc.com/data/info_f.php', function(data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫:" + data.name + "</li>");
$("ul").append("<li>男朋友对我说:" + data.say + "</li>");
}, "json");
3.post $.post(url,[data],[callback])
参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。
$.post("http://www.imooc.com/data/check_f.php",
{num:$('#txtNumber').val()},
function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
});
4.serialize $(selector).serialize()
其中selector参数是一个或多个表单中的元素或表单元素本身。
$('#litest').html( $('form').serialize() );
5.ajax $.ajax([settings])
其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。
$.ajax({
url: 'http://www.imooc.com/data/check.php',
method:'get',
dataType:'json',
data: { num: $("#txtNumber").val() },
success: function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
6.ajaxSetup $.ajaxSetup([options])
先调用ajaxSetup()方法设置全局的Ajax选项值,再点击两个按钮,分别使用ajax()方法请求不同的服务器数据,并将数据内容显示在页面
<script type="text/javascript">
$(function () {
$.ajaxSetup({
type: 'POST',
success:function(data){
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check_f.php"
});
})
});
</script>
jquery AJAX学习
还不快抢沙发
最新回复
haha: 887878
refewf: wefewfre
refewf: ededededeed