• 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文件有问题
     
  • 相关阅读:
    JavaScript总结（一）
    序列化函数
    random与os,sys模块
    认识模块
    时间模块
    日志处理
    异常处理
    类的约束
    反射
    区分函数以及方法
  • 原文地址：https://www.cnblogs.com/jldiary/p/5137797.html
Copyright © 2020-2023  润新知