利用Ajax實現無重新整理回貼demo

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

上載者：User

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

後端是用.net 中的WebServices實現的存諸到資料庫。 Ajax調用WebSerivce特別是用post提交時要注意協議及放在IIS伺服器上才能正常調用。

HTML代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
    <style type="text/css">
        body
        {
            font-size: 12px;
            color: #414141;
            margin: 0px;
            padding: 0px;
        }
        #divView
        {
            margin: 0px;
            padding: 0px;
            width: 30%;
        }
        #divView ul
        {
            list-style-type: none;
            line-height: 28px;
            margin: 0px;
            padding: 0px;
        }
        #divView li
        {
            border: solid 1px #ccc;
            border-bottom: 0px;
            line-height:28px;
        }
        #ul
        {
            list-style-type: none;
            line-height: 24px;
            margin: 0px;
            padding: 0px;
             width:30%;
        }
        #ul li
        {
         border:solid 1px #ccc;
         border-bottom:0px;
         line-height:28px;
        }
        .input
        {
         border:solid 1px #ccc;
         width:200px;
         background-color:#fff;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divView" runat="server">
    </div>
    <ul id="ul">
        <li style="background-color:#ccc;font-size:14px;font-weight:100">回帖</li>
        <li>標題：<input type="text" id="txtTitle" class="input" /></li>
        <li>內容：<textarea class="input" id="ttaContext" rows="5" cols="20"></textarea></li>
        <li>
            <input type="button" value="提交" id="btnSubmit" /></li>
    </ul>
    </form>
</body>
<script type="text/javascript">
var xmlHttp;

function $(str){return document.getElementById(str);}

function createXmlHttp()
{
xmlHttp=window.ActiveXObject?new ActiveXObject("msxml2.xmlHttp"):new XMLHttpRequest();
}

/// <summary>
    /// 添加回帖方法
    /// </summary>
    /// <param name="title">資訊標題</param>
    /// <param name="context">資訊內容</param>
    /// <returns></returns>
    [WebMethod]
    public string InsertPostById(string title, string context)
    {
        SqlCommand cmd = new SqlCommand();
        using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["SQL_STRING"].ToString()))
        {
            conn.Open();
            cmd.Connection = conn;
            cmd.CommandType = CommandType.Text;
            cmd.CommandText = "INSERT INTO TBPOSTS(PTITLE,PCONTEXT) VALUES(@PTITLE,@PCONTEXT)";

            SqlParameter[] parms = new SqlParameter[]
            {
            new SqlParameter("@PTITLE",SqlDbType.NVarChar,100),
            new SqlParameter("@PCONTEXT",SqlDbType.NVarChar,3000)
            };
            parms[0].Value = Server.UrlDecode(title);
            parms[1].Value = Server.UrlDecode(context);

cmd.Parameters.AddRange(parms);

string val = cmd.ExecuteNonQuery().ToString();
cmd.Parameters.Clear();

return val;
}

}

頁面載入C#方法:

protected void Page_Load(object sender, EventArgs e)
    {
        List<post> postList = GetPostList();
        if (postList.Count <= 0)
        {
            this.divView.InnerHtml = "<li id='liNull'>暫無回貼!</li>";
            return;
        }
        foreach (post postInfo in postList)
        {
            string temp = "<ul><li><b>" + postInfo.PTitle + "</b></li><li>" + postInfo.PContext + "</li></ul>";
            this.divView.InnerHtml += temp;
        }
    }
    public List<post> GetPostList()
    {
        SqlCommand cmd = new SqlCommand();
        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["SQL_STRING"].ToString());
        try
        {
            conn.Open();
            cmd.CommandType = CommandType.Text;
            cmd.Connection = conn;
            cmd.CommandText = "SELECT PID,PTITLE,PCONTEXT FROM TBPOSTS";
            List<post> posts = new List<post>();
            using (SqlDataReader rdr = cmd.ExecuteReader(CommandBehavior.CloseConnection))
            {
                while (rdr.Read())
                {
                    post postInfo = new post(rdr.GetInt32(0), rdr.GetString(1), rdr.GetString(2));
                    posts.Add(postInfo);
                }
                return posts;
            }
        }
        catch
        {
            conn.Close();
            return null;
        }
    }

   //這裡聲明了一個類中類
    public class post
    {
        public post() { }
        /// <summary>
        ///
        /// </summary>
        /// <param name="pid">ID</param>
        /// <param name="ptitle">標題</param>
        /// <param name="pcontext">內容</param>
        public post(int pid, string ptitle, string pcontext)
        {
            this.PID = pid;
            this.PTitle = ptitle;
            this.PContext = pcontext;
        }
        public int PID;
        public string PTitle;
        public string PContext;
    }

當然頁面載入也可以用Ajax實現但感覺沒有必要花那麼大代價。。

本文章原先以中文撰寫並發佈於 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