zoukankan      html  css  js  c++  java
  • JQuery学习笔记 [Ajax实现新闻点评功能] (63)

    JQuery Ajax GuestBook

    <!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("您的点评已成功发表!");
    %>
  • 相关阅读:
    丁丁又病了
    领导之所以是领导
    丁丁的进步
    最近比较烦
    批量更新数据表
    转帖:《EnterLib PIAB深入剖析》系列博文汇总
    XML DOM介绍
    转大白话系列之C#委托与事件讲解大结局
    using
    jQuery工作原理解析以及源代码示例
  • 原文地址:https://www.cnblogs.com/RobotTech/p/2100245.html
Copyright © 2011-2022 走看看