1.17学习jquery权威指南

1、ajax方面（东西比较杂，很多相关于.net挂钩的服务器端接触没有实际操作，全部放进来，或许以后当作demo使用）

￥（“body”）.load("text.txt");    //这个是最简单的jquey加载

 

$("body").load("text.txt",function(responseTxt,statusTxt,xhr){

     if(statusTxt=="success"){

       console.log("外部加载成功");

     }

     if(statusTxt=="error"){

      console.log("错误是："+xhr.status+":"+xhr.statusTxt);

     }

})

 

 

---

$.get( "ceshi.txt" , function ( data , status ){

                 console .log( "数据是：" + data + "\n状态" + status);

              })

这个是get方式获取

<! DOCTYPE html>

< html >

     < head >

           < meta charset = "UTF-8" >

           < title ></ title >

     </ head >

     < body >

           < div class = "ceshi" >

                姓名：测试< br />

                性别：未知< br />

                邮箱：ceshi@qq.com

           </ div >

           < div class = "ceshi1" >

                姓名：测试1< br />

                性别：未知1< br />

                邮箱：ceshi@qq.com

           </ div >

     </ body >

</ html >

//上面是b.html中的

 

 

 

---

<! DOCTYPE html>

< html >

 

     < head >

           < meta charset = "UTF-8" >

           < title ></ title >

           < script src = "js/jquery-1.11.1.min.js" type = "text/javascript" charset = "utf-8" ></ script >

           < style type = "text/css" >

 

            </ style >

     </ head >

 

     < body >

           < input type = "button" name = "hq" id = "hq" value = "获取数据" />

           < div id = "show" ></ div >

     </ body >

     < script type = "text/javascript" >

            var objXmlHttp = null ;

 

            function CreateXMLHTTP () {

                 if ( window .ActiveXObject) {

                     objXmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );

                } else {

                      if ( window .XMLHttpRequest) {

                           objXmlHttp = new XMLHttpRequest();

                     } else {

                           alert( "初始化XMLHTTP错误！" );

                     }

                }

           }

 

            function GetSendDate () {

                $( "#show" ).html( "<img src='img/t2.png/>'" );      

                 var strSendUrl = "b.html?data=" + Date();      //这里添加 ？data="+Date();的作用是删除缓存的数据，以获取最新数据

                CreateXMLHTTP();

                objXmlHttp.open( "GET" , strSendUrl, true );

                objXmlHttp. onreadystatechange = function () {

                      if (objXmlHttp.readyState == 4 ) {

                            if (objXmlHttp.status == 200 ) {

 

                                 document .getElementById( "show" ).innerHTML = objXmlHttp.responseText;

                           }

                     }

                }

                objXmlHttp.send( null );

           }

           $( "#hq" ).click( function () {

                GetSendDate();

           })

      </ script >

 

</ html >

 

//上面是ajax方式的获取

 

---

 

 

//$("#hq").click(function(){

//   $("#show").load("b.html");

//})

//这样写是获取b.html页面中的所有数据

$( "#hq" ).click( function (){

     $( "#show" ).load( "b.html .ceshi" );

})

//这种写法只获取样式为ceshi的数据

//上面是jquey的load方法获取数据，很方便的样子～

 

---

$( "#hq" ).click( function (){

     $.getJSON( "data.json" , function ( data ){

           $( "#show" ).empty();

            var strHTML = "" ;

           $.each(data, function ( dataindex , info ) {

                strHTML += "姓名：" + info[ "name" ] + "<br/>" ;

                strHTML += "性别：" + info[ "sex" ] + "<br/>" ;

                strHTML += "年龄：" + info[ "age" ] + "<br/>" ;

           });

           $( "#show" ).html(strHTML);

     })

})

//上面是getJSON的获取方式

//获取多层的时候的话就是$.each(data[i].value,function(dataindex,info))

 

[

     {

            "name" : "jl" ,

            "sex" : "男" ,

            "age" : "23" ,

            "value" : [

                 {

                 "pid" : "1" ,

                 "username" : "曾用名"

                 },

                 {

                 "pid" : "2" ,

                 "username" : "曾用名1"

                 }

            ]

     }, {

            "name" : "ceshi" ,

            "sex" : "未知" ,

            "age" : "未知" ,

            "value" : [

                 {

                 "pid" : "3" ,

                 "username" : "曾用名3"

                 },

                {

                 "pid" : "4" ,

                 "username" : "曾用名4"

                 }

            ]

     }

]

 

//上面是与getJSON相对应的json数据

 

---

$("#hq").click(function(){

$.getScript("userinfo.js");

})

//上面是getscript方式的数据调用

var data = [{

      "name" : "jl" ,

      "sex" : "男" ,

      "age" : "23"

}, {

      "name" : "ceshi" ,

      "sex" : "未知111" ,

      "age" : "未知11"

}];

 

var strHTML = "" ;

$.each(data, function ( dataindex , info ) {

     strHTML += "姓名：" + info[ "name" ] + "<br/>" ;

     strHTML += "性别：" + info[ "sex" ] + "<br/>" ;

     strHTML += "年龄：" + info[ "age" ] + "<br/>" ;

})

$( "#show" ).html(strHTML);

//上面是与之对应的userinfo.js的数据

 

 

---

jQuery中异步加载XML文档

$.get( url ,[data],[callback],[type])

可选参数表示返回数据的格式，如html、 xml、 js、 json、 text等

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="6-5.aspx.cs" Inherits="WebApplication1._6_5" %>

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

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

< head runat = "server" >

    < title ></ title >

    < script src = "Scripts/jquery-1.4.2.js" type = "text/javascript" ></ script >

    < script type = "text/javascript" >

        $( function () {

            $("#Button1").click( function () {

                $.get("UserInfo.xml", function ( data ) {

                    $("#divTip").empty();

                    var strHTML = "";

                    $(data).find("User").each( function () {

                        var $strUser = $(this);

                        strHTML += "姓名："

                        + $strUser.find("name"). text () + "<br />";

                        strHTML += "性别："

                        + $strUser.find("sex"). text () + "<br />";

                        strHTML += "邮箱："

                        + $strUser.find("email"). text () + "<br />";

                    });

                    $("#divTip").html(strHTML);

                })

            });

        });

    </ script >

</ head >

< body >

    < div class = "divFrame" >

        < div class = "divTitle" >

            < input id = "Button1" type = "button" onclick = "GetSendData()" class = "btn" value = "获取数据" />

        </ div >

        < div class = "divContent" >

            < div id = "divTip" >

            </ div >

        </ div >

    </ div >

</ body >

</ html >

//下面是userinfo的数据

UserInfo. xml

<?xml version="1.0" encoding="utf-8" ?>

< Info >

  < User id = "1" >

    < name > 陶国荣 </ name >

    < sex > 男 </ sex >

    < email > tao_guo_rong@ 163. com </ email >

  </ User >

 

  < User id = "2" >

    < name > 李建洲 </ name >

    < sex > 女 </ sex >

    < email > xiaoli@ 163. com </ email >

  </ User >

</ Info >

---

使用get请求aspx服务器端数据查询

 

 

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>$.get发送请求</title>
	<script type="text/javascript"
	src="Jscript/jquery-1.4.2-vsdoc.js">
	</script>
	<script type="text/javascript"
	src="Jscript/jquery-1.4.2.js">
	</script>
	<style type="text/css">
	body{font-size:13px}
	.divFrame{width:260px;border:solid 1px #666}
	.divFrame .divTitle{padding:5px;height:23px}
	.divFrame .divTitle span{float:left;padding:2px}
	.divFrame .divContent{padding:8px}
	.divFrame .divContent .clsShow{font-size:14px}
	.txt{border:#666 1px solid;padding:2px;width:118px;float:left;margin-right:3px}
	.btn {border:#666 1px solid;padding:2px;width:80px;float:left;
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
	</style>
	<script type="text/javascript">
	$(function() {
	$("#Button1").click(function() { //按钮单击事件
	//打开文件，并通过回调函数返回服务器响应后的数据
	$.get("UserInfo.aspx",
	{ name: encodeURI($("#txtName").val()) },
	function(data) {
	$("#divTip")
	.empty() //先清空标记中的内容
	.html(data); //显示服务器返回的数据
	})
	})
	})
	</script>
	</head>
	<body>
	<div class="divFrame">
	<div class="divTitle">
	<span>姓名：</span>
	<input id="txtName" type="text" class="txt" />
	<input id="Button1" type="button"
	class="btn" value="请求数据" />
	</div>
	<div class="divContent">
	<div id="divTip"></div>
	</div>
	</div>
	</body>
	</html>
	//下面是对应的userinfo.aspx的页面

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>

<%

    string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解码姓名字符

    string strHTML = "<div class='clsShow'>"; //初始化保存内容变量

    if (strName == "陶国荣")

    {

        strHTML += "姓名：陶国荣<br>";

        strHTML += "性别：男<br>";

        strHTML += "邮箱：tao_guo_rong@163.com<hr>";

    }

    else if (strName == "李建洲")

    {

        strHTML += "姓名：李建洲<br>";

        strHTML += "性别：女<br>";

        strHTML += "邮箱：xiaoli@163.com<hr>";

    }

    strHTML += "</div>";

    Response.Write(strHTML);

%>

 

注释：客户端在向服务器端传递参数的时候格式为：{key:value0,key:value1,.......}如果参数值为中文格式，必须通过使用encodeURI进行转码，当然客户端接收到时候使用decodeURI进行解码即可

 

 

---

       使用post序列化全局函数向服务器请求数据     

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>serialize()序列化表单</title>
	<script type="text/javascript"
	src="Jscript/jquery-1.4.2-vsdoc.js">
	</script>
	<script type="text/javascript"
	src="Jscript/jquery-1.4.2.js">
	</script>
	<style type="text/css">
	body{font-size:13px}
	.divFrame{width:345px;border:solid 1px #666}
	.divFrame .divTitle{padding:5px;height:23px}
	.divFrame .divTitle span{float:left;padding:2px;padding-top:5px;}
	.divFrame .divContent{padding:8px}
	.divFrame .divContent .clsShow{font-size:14px}
	select,input{float:left}
	.txt{border:#666 1px solid;padding:2px;width:80px;margin-right:3px}
	.btn {border:#666 1px solid;padding:2px;width:50px;
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
	</style>
	<script type="text/javascript">
	$(function() {
	$("#Button1").click(function() { //按钮单击事件
	//打开文件，并通过回调函数返回服务器响应后的数据
	$.post("User-Info.aspx",
	$("#frmUserInfo").serialize(), //序列化表单数据
	function(data) {
	$("#divTip")
	.empty() //先清空标记中的内容
	.html(data); //显示服务器返回的数据
	})
	})
	})
	</script>
	</head>
	<body>
	<form id="frmUserInfo">
	<div class="divFrame">
	<div class="divTitle">
	<span>姓名：</span>
	<input name="txtName" type="text" class="txt" />
	<select name="selSex" style="height:22px;margin-right:3px">
	<option value="">选性别</option>
	<option value="男">男</option>
	<option value="女">女</option>
	</select>
	<input name="chkEmail" type="checkbox" value="1" style="padding-top:5px" /><span style="margin-right:10px">显示邮箱</span>
	<input id="Button1" type="button"
	class="btn" value="请求" />
	</div>
	<div class="divContent">
	<div id="divTip"></div>
	</div>
	</div>
	</form>
	</body>
	</html>
	下面是post对应的user_info.aspx的数据 <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> <%     string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解码姓名字符     string strSex = System.Web.HttpUtility.UrlDecode(Request["sex"]);//解码性别字符     string strHTML = "<div class='clsShow'>"; //初始化保存内容变量     if (strName == "陶国荣" && strSex=="男")     {         strHTML += "姓名：陶国荣<br>";         strHTML += "性别：男<br>";         strHTML += "邮箱：tao_guo_rong@163.com<hr>";     }     else if (strName == "李建洲" && strSex == "女")     {         strHTML += "姓名：李建洲<br>";         strHTML += "性别：女<br>";         strHTML += "邮箱：xiaoli@163.com<hr>";     }     strHTML += "</div>";     Response.Write(strHTML); %>     下面是ajax方式的请求与发送数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">   <head>   <title>$.ajax()方法发送请求</title>   <script type="text/javascript"   src="Jscript/jquery-1.4.2-vsdoc.js">   </script>   <script type="text/javascript"   src="Jscript/jquery-1.4.2.js">   </script>   <style type="text/css">   body{font-size:13px}   .divFrame{width:225px;border:solid 1px #666}   .divFrame .divTitle{padding:5px;height:23px}   .divFrame .divTitle span{float:left;padding:2px;padding-top:5px;}   .divFrame .divContent{padding:8px;text-align:center}   .divFrame .divContent .clsShow{font-size:14px;line-height:2.0em}   .divFrame .divContent .clsShow .clsError{font-size:13px;border:solid 1px #cc3300;padding:2px;display:none;margin-bottom:5px;background-color:#ffe0a3}   .txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px}   .btn {border:#666 1px solid;padding:2px;width:50px;   filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}   </style>   <script type="text/javascript">   $(function() {   $.ajax({ //请求登录页   url: "login.html", //登录静态页   dataType: "html",   success: function(HTML) { //返回页面内容   $("#frmUserLogin").html(HTML); //将页面内容置入表单   $("#btnLogin").click(function() { //“登录”按钮单击事件   //获取用户名称   var strTxtName = encodeURI($("#txtName").val());   //获取输入密码   var strTxtPass = encodeURI($("#txtPass").val());   //开始发送数据   $.ajax({ //请求登录处理页   url: "login.aspx", //登录处理页   dataType: "html",   //传送请求数据   data: { txtName: strTxtName, txtPass: strTxtPass },   success: function(strValue) { //登录成功后返回的数据   //根据返回值进行状态显示   if (strValue == "True") {   $(".clsShow").html("操作提示，登录成功！");   }   else {   $("#divError").show().html("用户名或密码错误！");   }   }   })   })   }   })   })   </script>   </head>   <body>   <form id="frmUserLogin"></form>   </body>   </html> 下面是login.aspx页面的内容 <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> <%     string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]); //解码姓名字符     string strPass = System.Web.HttpUtility.UrlDecode(Request["txtPass"]); //解码密码字符     bool blnLogin = false;     if (strName == "admin" && strPass == "123456")     {         blnLogin = true;     }     Response.Write(blnLogin); %>   下面是login.html页面的内容 <div class="divFrame">   <div class="divTitle">   <span>用户登录</span>   </div>   <div class="divContent">   <div class="clsShow">   <div id="divError" class="clsError"></div>   <div>名称：<input id="txtName" type="text" class="txt" /></div>   <div>密码：<input id="txtPass" type="password" class="txt" /></div>   <div>   <input id="btnLogin" type="button" value="登录" class="btn" />&nbsp;&nbsp   <input id="btnReset" type="reset" value="取消" class="btn" />   </div>   </div>   </div>   </div>

 

---

下面是ajaxsetup设置全局性的ajax选项

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>$.ajaxSetup()方法全局设置Ajax</title>
	<script type="text/javascript"
	src="Jscript/jquery-1.4.2-vsdoc.js">
	</script>
	<script type="text/javascript"
	src="Jscript/jquery-1.4.2.js">
	</script>
	<style type="text/css">
	body{font-size:13px}
	.divFrame{width:225px;border:solid 1px #666}
	.divFrame .divTitle{padding:5px;height:30px}
	.divFrame .divTitle span{float:left;padding:2px;padding-top:5px}
	.divFrame .divContent{padding:8px}
	.divFrame .divContent .clsShow{font-size:14px}
	.txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px}
	.btn {border:#666 1px solid;padding:2px;width:65px;
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
	</style>
	<script type="text/javascript">
	$(function() {
	$.ajaxSetup({ //设置全局性的Ajax选项
	type: "GET",
	url: "UserInfo.xml",
	dataType: "xml"
	})
	$("#Button1").click(function() { //"姓名”按钮的单击事件
	$.ajax({
	success: function(data) { //传回请求响应的数据
	ShowData(data, "姓名", "name"); //显示"姓名"部分
	}
	})
	})
	$("#Button2").click(function() { //"性别”按钮的单击事件
	$.ajax({
	success: function(data) { //传回请求响应的数据
	ShowData(data, "性别", "sex"); //显示"性别"部分
	}
	})
	})
	$("#Button3").click(function() { //"邮箱”按钮的单击事件
	$.ajax({
	success: function(data) { //传回请求响应的数据
	ShowData(data, "邮箱", "email"); //显示"邮箱"部分
	}
	})
	})
	/*
	*根据名称与值，获取请求响应数据中的某部分
	*@Param d为请求响应后的数据
	*@Param n为数据中文说明字符
	*@Param d为数据在响应数据中的元素名称
	*/
	function ShowData(d, n, v) {
	$("#divTip").empty(); //先清空标记中的内容
	var strHTML = ""; //初始化保存内容变量
	$(d).find("User").each(function() { //遍历获取的数据
	var $strUser = $(this);
	strHTML += n + "：" + $strUser.find(v).text() + "<hr>";
	})
	$("#divTip").html(strHTML); //显示处理后的数据
	}
	})
	</script>
	</head>
	<body>
	<div class="divFrame">
	<div class="divTitle">
	<span><input id="Button1" type="button" value="姓名" class="btn" /></span>
	<span><input id="Button2" type="button" value="性别" class="btn" /></span>
	<span><input id="Button3" type="button" value="邮箱" class="btn" /></span>
	</div>
	<div class="divContent">
	<div id="divTip" class="clsShow"></div>
	</div>
	</div>
	</body>
	</html> 下面是对应的xml文件 <?xml version="1.0" encoding="UTF-8"?>   -<Info>     -<User id="1">   <name>陶国荣</name>   <sex>男</sex>   <email>tao_guo_rong@163.com</email>   </User>     -<User id="2">   <name>李建洲</name>   <sex>女</sex>   <email>xiaoli@163.com</email>   </User>   </Info>

 

 

---

 

ajaxstar和ajaxstop的应用

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Ajax中的全局事件</title>
	<script type="text/javascript"
	src="Jscript/jquery-1.4.2-vsdoc.js">
	</script>
	<script type="text/javascript"
	src="Jscript/jquery-1.4.2.js">
	</script>
	<style type="text/css">
	body{font-size:13px}
	.divFrame{width:325px;border:solid 1px #666}
	.divFrame .divTitle{padding:5px;height:30px}
	.divFrame .divTitle span{float:left;padding:2px;padding-top:5px}
	.divFrame .divContent{padding:8px}
	.divFrame .divContent .clsShow{font-size:14px}
	.divFrame .divContent .clsTip{width:160px;text-align:center;font-size:13px;border:solid 1px #cc3300;padding:2px;margin-bottom:5px;background-color:#ffe0a3}
	.txt{border:#666 1px solid;padding:2px;width:160px;margin-right:3px}
	.btn {border:#666 1px solid;padding:2px;width:65px;
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
	</style>
	<script type="text/javascript">
	$(function() {
	//元素绑定全局ajaxStart事件
	$("#divMsg").ajaxStart(function() {
	$(this).show(); //显示元素
	})
	//元素绑定全局ajaxStop事件
	$("#divMsg").ajaxStop(function() {
	$(this).html("已成功获取数据。").hide();
	})
	//按钮的单击事件
	$("#Button1").click(function() {
	$.ajax({ //带参数请求服务器
	type: "GET",
	url: "GetData.aspx",
	//获取加码后的数据并作为参数传给服务器
	data: { txtData: encodeURI($("#txtData").val()) },
	dataType: "html",
	success: function(data) { //显示解码后的返回数据
	$("#divTip").html(decodeURI(data));
	}
	})
	})
	})
	</script>
	</head>
	<body>
	<div class="divFrame">
	<div class="divTitle">
	<span>数据：<input id="txtData" type="text" class="txt" /></span>
	<span><input id="Button1" type="button" value="发送" class="btn" /></span>
	</div>
	<div class="divContent">
	<div id="divMsg" class="clsTip">正在发送数据请求…</div>
	<div id="divTip" class="clsShow"></div>
	</div>
	</div>
	</body>
	</html> 下面是对应的getdata。aspx页面内容 <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> <%     string strName = Request["txtData"]; //返回传回的参数     Response.Write(strName); //返回传回的参数 %>

 

---

下面是一个留言板～

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>新闻点评功能</title>
	<script type="text/javascript"
	src="Jscript/jquery-1.4.2-vsdoc.js">
	</script>
	<script type="text/javascript"
	src="Jscript/jquery-1.4.2.js">
	</script>
	<link type="text/css" href="Css/css_Ajax.css" rel="Stylesheet" />
	<script type="text/javascript" src="Jscript/js_Ajax.js"></script>
	</head>
	<body>
	<div class="divFrame">
	<div class="divTitle">
	<span>最新点评</span>
	</div>
	<div class="divContent">
	</div>
	<div class="divSubmit">
	<div class="SubTitle">发表评论<span id="divMsg" class="clsTip">正在发送数据请求…</span></div>
	<div class="SubContent">
	<textarea id="txtContent" rows="6" class="txt"></textarea>
	<div class="SubBtn">
	<span style="float:left">用户名：<input id="txtName" type="text" class="txt" /></span>
	<span style="float:right"><input id="Button1" type="button" value="发表" class="btn" /></span>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>

下面是 js_Ajax.js的内容

/// <reference path="jquery-1.4.2-vsdoc.js"/>
/// <reference path="jquery-1.4.2.js"/>
$(function() {
    //元素绑定全局ajaxStart事件
    $("#divMsg").ajaxStart(function() {
        $(this).show(); //显示元素
    })
    //元素绑定全局ajaxStop事件
    $("#divMsg").ajaxStop(function() {
        $(this).html("数据处理已完成。").hide();
    })
    //初始化点评数据
    LoadData();
    $("#Button1").click(function() { //点击"发表"按钮事件
        //获取加码后的用户名
        var strName = encodeURI($("#txtName").val());
        //获取加码后的发表内容
        var strContent = encodeURI($("#txtContent").val());
        $.ajax(
           {
               type: "GET",
               url: "AddData.aspx", //请求增加数据动态页
               dataType: "html",
               data: { name: strName, content: strContent },
               success: function(msg) {
                   alert(msg);
                   LoadData();
                   $("#txtName").val("");
                   $("#txtContent").val("");
               }
           })
    })
    /*
    *动态加载XML格式的点评数据
    */
    function LoadData() {
        $.ajax(
           {
               type: "GET",
               url: "CommentData.xml", //请求XML格式数据
               dataType: "xml",
               cache: false,
               success: function(data) {
                   $(".divContent").empty(); //先清空标记中的内容
                   var strHTML = ""; //初始化保存内容变量
                   if ($(data).find("Data").length == 0) {//如果没有找到数据
                       strHTML = "<div style='text-align:center'>目前还没有找到点评数据！</div>";
                   }
                   $(data).find("Data").each(function() { //遍历获取的数据
                       var $strUser = $(this);
                       strHTML += "<div class='clsShow'>";
                       strHTML += "<div class='ShowTitle'>荣拓网友&nbsp;&nbsp;<a href=''>" + $strUser.find("name").text() + "</a></div>";
                       strHTML += "<div class='ShowContent'>" + $strUser.find("content").text() + "</div>";
                       strHTML += "<div class='ShowBottom'>发送时间&nbsp;&nbsp;" + $strUser.find("date").text() + "</div>"
                       strHTML += "</div>"
                   })
                   $(".divContent").html(strHTML); //显示处理后的数据
               }
           })
    }

})

下面是 css_Ajax.css的内容

body{font-size:13px}
a
{
        text-decoration:none
}
/*外框样式*/
.divFrame
{
        width:572px;
        border:solid 1px #666;
        background-color:#fafcff
}
/*外框中主题样式*/
.divFrame .divTitle
{
        padding:5px;
        background-color:#eee
}
.divFrame .divTitle span
{
        padding:2px;
        padding-top:5px;
        font-family:黑体;
        font-size:14px
}
/*外框中内容样式*/
.divFrame .divContent
{
        padding:8px
}
.divFrame .divContent .clsShow
{
        border-bottom:dashed 1px #ccc;
        padding:3px;
        margin:5px;
        line-height:2.0em
}
.divFrame .divContent .clsShow .ShowTitle
{
        padding-left:5px;
        font-size:12px;
        color:#555
}
.divFrame .divContent .clsShow .ShowContent
{
        padding-left:5px;
        font-size:14px
}
.divFrame .divContent .clsShow .ShowBottom
{
        text-align:right;
        font-size:12px;
        color:#555
}     
/*外框中提交点评内容样式*/
.divFrame .divSubmit
{
        padding:20px
}
.divFrame .divSubmit .SubTitle
{
        padding-bottom:10px;
        font-weight:bold
}
.divFrame .divSubmit .SubContent
{
        width:532px
}
.divFrame .divSubmit .SubContent textarea
{
        width:525px
}
.divFrame .divSubmit .SubContent .SubBtn
{
        padding-top:10px;
        padding-bottom:12px;
        font-size:12px;
        color:#555;
        font-weight:bold
}
/*侦察请求状态样式*/
.clsTip
{
        position:absolute;
    width:160px;
    text-align:center;
    font-size:13px;
    border:solid 1px #cc3300;
    padding:2px;
    margin-bottom:5px;
    background-color:#ffe0a3
 }
 /*文本框样式*/
 .txt
 {
        border:#666 1px solid;
        padding:2px;
        width:100px;
        margin-right:3px
 }
 /*按钮样式*/
.btn 
{
        border:#666 1px solid;
        padding:2px;
        width:65px;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8)

 }

 

下面是xml的内容

<?xml version="1.0"?>

 

-<Comment>

 

 

-<Data>

 

<name>张三</name>

 

<content>这个话题真是不错啊！</content>

 

<date>7:15:42</date>

 

</Data>

 

</Comment>

下面是adddata.aspx页面的内容

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>

<%@ Import Namespace="System.Xml" %>

<%@ Import Namespace="System.IO" %>

<%

    string strName = System.Web.HttpUtility.UrlDecode(Request["name"]); //解码点评用户名称

    string strContent = System.Web.HttpUtility.UrlDecode(Request["content"]); //解码点评提交内容

    string strFileName = "CommentData.xml";

    //定义xml文档变量

    XmlDocument xmlDoc = new XmlDocument();

    //打开指定的xml文档

    xmlDoc.Load(Server.MapPath(strFileName));

    //查找根节点元素

    XmlNode xmlN = xmlDoc.SelectSingleNode("Comment");

    //加入一个节点元素

    XmlElement xmlE = xmlDoc.CreateElement("Data");

 

    //创建一个子节点

    XmlElement xmlEn = xmlDoc.CreateElement("name");

    //设置节点文本

    xmlEn.InnerText = strName;

    //添加到节点中

    xmlE.AppendChild(xmlEn);

    //创建一个子节点

    XmlElement xmlEc = xmlDoc.CreateElement("content");

    //设置节点文本

    xmlEc.InnerText = strContent;

    //添加到节点中

    xmlE.AppendChild(xmlEc);

    //创建一个子节点

    XmlElement xmlEd = xmlDoc.CreateElement("date");

    //获取时间的时分秒

    string strSendTime = DateTime.Now.Hour + ":" + DateTime.Now.Minute + ":" + DateTime.Now.Second;

    xmlEd.InnerText =strSendTime;

    //添加到节点中

    xmlE.AppendChild(xmlEd);

 

    //将节点加入根节点中   

    xmlN.AppendChild(xmlE);

    //保存创建好的xml文档

    xmlDoc.Save(Server.MapPath(strFileName));

    Response.Write("您的点评已成功发表！");

%>

 

上面这个留言板是有问题的，只能获取，不知道是不是aspx文件有问题

 

转载于:https://www.cnblogs.com/jldiary/p/5137797.html