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

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!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("您的點評已成功發表！");

%>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More