Asp.net利用JQuery AJAX實現無重新整理評論思路與代碼

來源:互聯網
上載者:User

首先在資料庫中就建三個欄位的表用來儲存使用者名稱和評論資訊,Id只是為了設定唯一標示,所以設定成整型自增欄位就行了。

再建一個HTML頁面,只需簡單的拉幾個html控制項出來擺著就行,注意在頁面頂部有個<table>標籤用來佔位輸出評論內容。
Html頁面代碼就這樣簡單就行了: 複製代碼 代碼如下:<body><table id="room">
</table>
<div>
使用者名稱:<input id="Text1" type="text" /><br />
資訊:<textarea id="TextArea1" cols="20" name="S1" rows="5"></textarea><br />
<input id="Button1" type="button" value="提交" /></div>
</body>

然後再頁面剛載入的時候,需要從資料庫中顯示出已有的評論,所以建個後台一般處理常式,命名為:bodyload.ashx。這個幕後處理程式就是讀取資料庫中的所有評論資訊,載入到顯示頁面,當然我這裡只是簡單的利用|標記來區別每個使用者的評論,用@標記來區分使用者名稱和資訊,所以不是很嚴謹。資料操作使用的是強型別的DataSet
擷取所有評論資訊幕後處理代碼如下: 複製代碼 代碼如下:using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using _20100921Web.DataSetMsgTableAdapters;
using System.Text;
namespace _20100921Web
{
/// <summary>
/// bodyload 的摘要說明
/// </summary>
public class bodyload : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
T_MsgTableAdapter adapter = new T_MsgTableAdapter();
StringBuilder sb = new StringBuilder();
DataSetMsg.T_MsgDataTable table = adapter.GetData();
foreach (var v in table)
{
sb.Append(v.Username);
sb.Append("@");
sb.Append(v.Message);
sb.Append("|");
}
String result = sb.ToString();
context.Response.Write(result);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}

前台調用JQuery代碼在頁面載入時進行讀取評論,這裡就用到了JQuery中的AJAX了,其實也非常簡單,就只是調用JQuery中的$.post()方法就可以實現了,該方法實質還是調用了$.ajax()的方法。
前台JQuery代碼如下複製代碼 代碼如下:$.post("bodyload.ashx", function (data, state) {
if (state == "success") {
var msgArr = data.split("|");
for (var i = 0; i < msgArr.length; i++) {
if (msgArr[i].length == 0) {
return;
}
var msg = msgArr[i].split("@");
var res = "<tr><td>" + msg[0] + "說:</td><td>" + msg[1] + "</td></tr>";
$("#room").append(res);
}
}
});

然後來處理每一次使用者輸入後的插入資料及在頁面無重新整理更新顯示評論內容,需要另外添加一個幕後處理一般程式,命名為:update.ashx,用來在後台插入資料到資料庫中。
幕後處理代碼如下複製代碼 代碼如下:using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using _20100921Web.DataSetMsgTableAdapters;
namespace _20100921Web
{
/// <summary>
/// update 的摘要說明
/// </summary>
public class update : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
String username = context.Request["username"];
String msg = context.Request["msg"];
T_MsgTableAdapter adapter = new T_MsgTableAdapter();
adapter.Insert(username, msg);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}

最後就是在前台將資料傳到後台插入,並將評論資訊進行更新: 複製代碼 代碼如下:$("#Button1").click(function () {
var username = $("#Text1").val();
var msg = $("#TextArea1").text();
$.post("update.ashx", { "username": username, "msg": msg }, function (data, states) {
if (states == "success") {
var res = "<tr><td>" + username + "說:</td><td>" + msg + "</td></tr>";
$("#room").append(res);
}
})
})

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.