使用$.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格式 --获取时间的时,分,秒
后台代码:
public partial class textData : System.Web.UI.Page
{
protectedvoid Page_Load(object sender, EventArgs e)
{
string hour = DateTime.Now.Hour.ToString();
string minute = DateTime.Now.Minute.ToString();
string second = DateTime.Now.Second.ToString();
string textStr = hour + "/" + minute + "/" + second;
Response.Write(textStr);
Response.End();
}
}
前台获取代码:
<script src="../Scripts/jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnText").click(function () {
$.ajax({
url: "textData.aspx",
type: "get",
dataType: "text",
success: textSucceed,
error: Error
});
});
});
//成功
function textSucceed(result) {
$("#tbShow").val(result);
}
//错误函数
function Error() {
alert("Error!!!");
}
</script>
2>.Json格式 --获取时间的时,分,秒
我们需要在后台返回Json格式的数据,添加一个dll链接库,类似.Net中处理Json数据的API ,如图:
Json格式后台代码:
Json后台
//添加引用
using Newtonsoft.Json;
namespace AJAX.Json
{
public partial class jsonData : System.Web.UI.Page
{
protectedvoid Page_Load(object sender, EventArgs e)
{
string hour = DateTime.Now.Hour.ToString();
string minute = DateTime.Now.Minute.ToString();
string second = DateTime.Now.Second.ToString();
//匿名类型
var time = new { h = hour, m = minute, s = second };
//转Json格式
var jsonStr = JsonConvert.SerializeObject(new[] { time });
Response.Write(jsonStr);
Response.End();
}
}
}
Json格式前台代码:
<script src="../Scripts/jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
$("#btnJson").click(function () {
$.ajax({
url: "jsonData.aspx",
type: "get",
dataType: "json",
success: jsonSuccess,
error: Error
});
});
//成功
function jsonSuccess(result) {
//[{h:10,m:20,s:30}]
//key:数组元素下标-此时为0
//value:{ h:10,m:20,s:30 }
$.each(result, function (key, value) {
var h = value.h;
var m = value.m;
var s = value.s;
$("#tbShow").val(h + ":" + m + ":" + s);
});
}
//错误函数
function Error() {
alert("Error!!!");
}
</script>
3>.xml格式--获取用户名,出生年月
Xml格式后台代码:
//添加引用
using System.Xml;
namespace AJAX.Ajax_Xml
{
public partial class XmlData : System.Web.UI.Page
{
protectedvoid Page_Load(object sender, EventArgs e)
{
string name = "zld";
string birth = "1990-1-8";
//第一种:直接字符串拼接
string xmlStr = "<?xml version=\"1.0\" encoding=\"utf-8\" ?><root><Name>" + name + "</Name><Birth>" + birth + "</Birth></root>";
//第二种:XmlDocument创建
//创建文档
XmlDocument xmlDocument = new XmlDocument();
//文档头声明
XmlDeclaration xd = xmlDocument.CreateXmlDeclaration("1.0","utf-8",null);
xmlDocument.AppendChild(xd);
//添加根节点
XmlElement root = xmlDocument.CreateElement("root");
xmlDocument.AppendChild(root);
//给根节点添加子节点
XmlElement node1 = xmlDocument.CreateElement("Name");
node1.InnerText = name;
root.AppendChild(node1);
XmlElement node2 = xmlDocument.CreateElement("Birth");
node2.InnerText = birth;
root.AppendChild(node2);
//获取节点元素
string xmlStr2 = xmlDocument.OuterXml;
Response.Write(xmlStr2);
Response.End();
}
}
}
Xml格式前台代码:
<script src="../Scripts/jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnXml").click(function () {
$.ajax({
url: "XmlData.aspx",
type: "get",
dataType: "xml",
success: Success,
error: function (result) {
alert("相应内容非xml格式!");
}
});
});
});
function Success(xmlResult) {
//获取返回结果
var result = xmlResult;
//找寻根节点并循环遍历
$(result).find('root').each(function (key) {
//获取子节点名为Name的值
var name = $(this).children("Name").text();
//获取子节点名为Birth的值
var birth = $(this).children("Birth").text();
$("#tbShow").val(name + ":" + birth);
});
}
</script>