JQuery學習筆記 [Ajax實現新聞點評功能] (6-3)

來源:互聯網
上載者:User

 

<!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>

 

/// <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); //顯示處理後的資料
               }
           })
    }
})

 

<?xml version="1.0"?>
<Comment>
  <Data>
    <name>Robot</name>
    <content>謝謝!謝謝!謝謝!謝謝!</content>
    <date>16:36:20</date>
  </Data>
</Comment>

 

<%@ 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("您的點評已成功發表!");
%>
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.