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+ " 状态" +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{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;118px;float:left;margin-right:3px}
  .btn {border:#666 1px solid;padding:2px;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{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;80px;margin-right:3px}
  .btn {border:#666 1px solid;padding:2px;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{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;150px;margin-right:3px}
 
.btn {border:#666 1px solid;padding:2px;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{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;150px;margin-right:3px}
  .btn {border:#666 1px solid;padding:2px;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{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{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;160px;margin-right:3px}
  .btn {border:#666 1px solid;padding:2px;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
{
        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
{
        532px
}
.divFrame .divSubmit .SubContent textarea
{
        525px
}
.divFrame .divSubmit .SubContent .SubBtn
{
        padding-top:10px;
        padding-bottom:12px;
        font-size:12px;
        color:#555;
        font-weight:bold
}
/*侦察请求状态样式*/
.clsTip
{
        position:absolute;
    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;
        100px;
        margin-right:3px
 }
 /*按钮样式*/
.btn 
{
        border:#666 1px solid;
        padding:2px;
        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