AJAX方法调用

使用$.ajax实现获取后台数据，后台返回数据格式为text，json，xml三种类型

$.ajax()

定义：ajax()方法通过远程HTTP请求载入信息

语法：Jquery.ajax([settings])

常用参数[settings]--用于配置Ajax的键值对请求

url：必须，请求发送的地址

type:请求方式

data：可选，发送到服务器的数据

success：可选，请求成功时运行的函数

1).data：包含结果的数据

2).status:包含请求的状态

3).jqXHR:包含XmlHttpRequest对象

dataType：服务器响应的数据类型，默认将智能判断

其余参数详情参见：http://www.w3school.com.cn/jquery/ajax_ajax.asp

1>.test格式--获取时间的时，分，秒

后台代码：

 
 

  
  
publicpartialclasstextData:System.Web.UI.Page
  
  
{
  
  
protectedvoidPage_Load(objectsender,EventArgse)
  
  
{
  
  
stringhour=DateTime.Now.Hour.ToString();
  
  
stringminute=DateTime.Now.Minute.ToString();
  
  
stringsecond=DateTime.Now.Second.ToString();
  
  
stringtextStr=hour+"/"+minute+"/"+second;
  
  
Response.Write(textStr);
  
  
Response.End();
  
  
}
  
  
}
 
 

前台获取代码：

 
 

  
  
<scriptsrc="../Scripts/jquery-1.8.0.js"type="text/javascript"></script>
  
  
<scripttype="text/javascript">
  
  
$(function(){
  
  
$("#btnText").click(function(){
  
  
$.ajax({
  
  
url:"textData.aspx",
  
  
type:"get",
  
  
dataType:"text",
  
  
success:textSucceed,
  
  
error:Error
  
  
});
  
  
});
  
  
});
  
  
//成功
  
  
functiontextSucceed(result){
  
  
$("#tbShow").val(result);
  
  
}
  
  
//错误函数
  
  
functionError(){
  
  
alert("Error!!!");
  
  
}
  
  
</script>
 
 

2>.Json格式--获取时间的时，分，秒

我们需要在后台返回Json格式的数据，添加一个dll链接库，类似.Net中处理Json数据的API，如图：

Json格式后台代码：

 
 

  
  
Json后台
  
  
//添加引用
  
  
usingNewtonsoft.Json;
  
  
namespaceAJAX.Json
  
  
{
  
  
publicpartialclassjsonData:System.Web.UI.Page
  
  
{
  
  
protectedvoidPage_Load(objectsender,EventArgse)
  
  
{
  
  
stringhour=DateTime.Now.Hour.ToString();
  
  
stringminute=DateTime.Now.Minute.ToString();
  
  
stringsecond=DateTime.Now.Second.ToString();
  
  
//匿名类型
  
  
vartime=new{h=hour,m=minute,s=second};
  
  
//转Json格式
  
  
varjsonStr=JsonConvert.SerializeObject(new[]{time});
  
  
Response.Write(jsonStr);
  
  
Response.End();
  
  
}
  
  
}
  
  
}
 
 

Json格式前台代码：

 
 

  
  
<scriptsrc="../Scripts/jquery-1.8.0.js"type="text/javascript"></script>
  
  
<scripttype="text/javascript">
  
  
$("#btnJson").click(function(){
  
  
$.ajax({
  
  
url:"jsonData.aspx",
  
  
type:"get",
  
  
dataType:"json",
  
  
success:jsonSuccess,
  
  
error:Error
  
  
});
  
  
});
  
  
//成功
  
  
functionjsonSuccess(result){
  
  
//[{h:10,m:20,s:30}]
  
  
//key:数组元素下标-此时为0
  
  
//value:{h:10,s:30}
  
  
$.each(result,function(key,value){
  
  
varh=value.h;
  
  
varm=value.m;
  
  
vars=value.s;
  
  
$("#tbShow").val(h+":"+m+":"+s);
  
  
});
  
  
}
  
  
//错误函数
  
  
functionError(){
  
  
alert("Error!!!");
  
  
}
  
  
</script>
 
 

3>.xml格式--获取用户名，出生年月

Xml格式后台代码：

 
 

  
  
//添加引用
  
  
usingSystem.Xml;
  
  
namespaceAJAX.Ajax_Xml
  
  
{
  
  
publicpartialclassXmlData:System.Web.UI.Page
  
  
{
  
  
protectedvoidPage_Load(objectsender,EventArgse)
  
  
{
  
  
stringname="zld";
  
  
stringbirth="1990-1-8";
  
  
//第一种：直接字符串拼接
  
  
stringxmlStr="<?xmlversion=\"1.0\"encoding=\"utf-8\"?><root><Name>"+name+"</Name><Birth>"+birth+"</Birth></root>";
  
  
//第二种：XmlDocument创建
  
  
//创建文档
  
  
XmlDocumentxmlDocument=newXmlDocument();
  
  
//文档头声明
  
  
XmlDeclarationxd=xmlDocument.CreateXmlDeclaration("1.0","utf-8",null);
  
  
xmlDocument.AppendChild(xd);
  
  
//添加根节点
  
  
XmlElementroot=xmlDocument.CreateElement("root");
  
  
xmlDocument.AppendChild(root);
  
  
//给根节点添加子节点
  
  
XmlElementnode1=xmlDocument.CreateElement("Name");
  
  
node1.InnerText=name;
  
  
root.AppendChild(node1);
  
  
XmlElementnode2=xmlDocument.CreateElement("Birth");
  
  
node2.InnerText=birth;
  
  
root.AppendChild(node2);
  
  
//获取节点元素
  
  
stringxmlStr2=xmlDocument.OuterXml;
  
  
Response.Write(xmlStr2);
  
  
Response.End();
  
  
}
  
  
}
  
  
}
 
 

Xml格式前台代码：

 
 

  
  
<scriptsrc="../Scripts/jquery-1.8.0.js"type="text/javascript"></script>
  
  
<scripttype="text/javascript">
  
  
$(function(){
  
  
$("#btnXml").click(function(){
  
  
$.ajax({
  
  
url:"XmlData.aspx",
  
  
dataType:"xml",
  
  
success:Success,
  
  
error:function(result){
  
  
alert("相应内容非xml格式！");
  
  
}
  
  
});
  
  
});
  
  
});
  
  
functionSuccess(xmlResult){
  
  
//获取返回结果
  
  
varresult=xmlResult;
  
  
//找寻根节点并循环遍历
  
  
$(result).find('root').each(function(key){
  
  
//获取子节点名为Name的值
  
  
varname=$(this).children("Name").text();
  
  
//获取子节点名为Birth的值
  
  
varbirth=$(this).children("Birth").text();
  
  
$("#tbShow").val(name+":"+birth);
  
  
});
  
  
}
  
  
</script>