jQuery 之 ajax json

ajax利用json船底数据

一、

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>无标题页</title>

<styletype="text/css">

.show{display:block;}

.hide{display:none;}

</style>

<scripttype="text/javascript"src="jquery/jquery-1.2.6.js"></script>

<scripttype="text/javascript">

//这个方法把ajax方法封装一下,方便调用。

functionmyajax(){

//varobj=jsonData();

$.ajax({

type:'post',

url:'ajax.aspx',

data:jsonData(),//可以直接加一个函数名。

dataType:'json',

beforeSend:beforecall,

success:callback

});

}

//封装json数据,为了代码清晰

functionjsonData(){

varjsonStr="({";

jsonStr+="\"name\":";

jsonStr+="\"tree\"";

jsonStr+=",";

jsonStr+="\"id\":";

jsonStr+="\"123\"";

jsonStr+="})";

returneval(jsonStr);//关键在于转换。

}

//调用前方法,不成功

functionbeforecall(){

$('#wait').addClass("show").append('调出中...');

//alert('');//测试是否调用

}

//回调函数

functioncallback(data){

$('#response').append(data.name+data.id);

$('#wait').css("display","none");

}

//onload()事件

$(function(){

$('#confirm').click(myajax);

})

</script>

</head>

<body>

<divid="confirm">点击</div>

<divid="response">接收后台数据</div>

<divid="wait"class="hide">hello</div>

</body>

</html>

二、

$.get()和$.post()这两个方法基本都一样使用,所以只说$.post()这个东东!

情形1:$.post("url",function);此时返回的数据没有处理,所以不是json格式!

情形2:$.post("url",function,"json");此时虽然指定了返回的数据为json格式,但实际上却不是!

 情形3:$.post("url",{},function);此时传入的参数为空,没有指定返回的数据格式,所以也不是json格式!

情形4:$.post("url",{},function,"json");正确的返回了json格式的数据!

要点:当要把返回的数据当做的json格式来处理,必须传入参数(参数为空就写成{}),并且还得指定返回类型为"json"!

$.ajax({

url:"url",

dataType:"json",

type:"get"

success:function

})

要点:要指定dataType为"json",此时无论是get还是post方式都会得到json格式数据,但我建议为了和上面的两个方法保持一致,最好加上data:{}这个条件。

$.getJSON("url",function)

要点:以get的方式得到json格式数据,是$.get()的方便写法吧!

相关推荐