WebForm+通常處理程序+Ajax聊天

時間 2019-11-13

標籤 webform 通常處理程序 ajax 聊天欄目 Ajax 简体版

原文原文鏈接

#### 很容易理解插入數據到數據庫在使用 setInterval() 讀取數據顯示在頁面中好了不廢話直接上代碼不會的能夠加我微信 Jth11163
## 效果圖片
![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20181202151055277.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxMTk3ODM3,size_16,color_FFFFFF,t_70)html

## WebForm + Jquer + Css 代碼jquery

```ajax

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication15.WebForm1" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-3.3.1.js" ></script>
<style>
*{
list-style:none;
padding:0px;
margin:0px;
}
ul{
line-height:20px;
}
li{
padding-left:20px;
text-align:left;
margin-bottom:10px;
color:blue;
}
#form1{
width:500px;
height:550px;
margin:auto;
border:1px solid black;
}
.Box{
width:500px;
height:500px;
box-sizing:border-box;
border:1px solid black;
overflow:auto;
}
span{
color:#808080;
padding-left:15px;
font-size:13px;
}
p{
color:black;

font-size:16px;
}
#Button1{
background-color:blue;
width:80px;
height:45px;
line-height:45px;
color:white;
font-size:15px;
text-align:center;
border:none;
border-radius:5px;
cursor:pointer;
}
#TextBox1{
width:399px;
height:50px;
}
</style>
<script>

$(function () {
$('#TextBox1').focus();
//發送
function Send() {
$.ajax({
url: "Handler2.ashx",
data: { Content: $('#TextBox1').val() },
type: "POST",
success: function (data) {

}
});
}
$('input').keypress(function (e) {
if (e.which == 13) {
Send();
$('#TextBox1').val("");
$('#TextBox1').focus();
}
});
setInterval(function () {
$.ajax({
url: "Handler1.ashx", 
type: "POST",
success: function (data) {
$('.ul').children().remove();
$('.ul').append(data);
}
});
$('.Box').scrollTop($('.ul').outerHeight());
}, 1);
$('#Button1').click(function () {
Send();
$('#TextBox1').val("");
$('#TextBox1').focus();
})
})
</script>
</head>
<body>
<form autopostback="false" id="form1" runat="server">
<div class ="Box">
聊天 在線人數：<span id ="Count" runat="server"></span> 
<ul class ="ul"> 
</ul>
</div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<%--<asp:Button ID="Button1" AutoPostBack="false" runat="server" onclick="Button1_Click" Text="發送" />--%>
<span>
<input type="button" id ="Button1" value ="發送"/>
</span>
</form>

</body>
</html>

```
# Ashx(通常處理程序) 代碼
### 生成隨機名字
```sql

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Data;

namespace WebApplication15
{
/// <summary>
/// Handler1 的摘要說明
/// </summary>
public class Handler1 : IHttpHandler
{
DBHelper Helper = new DBHelper();
//處理
List<string> ChatContent = new List<string>();
string[] Arr = new string[100];
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string J = "";
string sql = "select * from Content order by SendTime Asc";
DataSet Ds = Helper.Data(sql);
if (Ds.Tables[0].Rows != null)
{
foreach (DataRow Row in Ds.Tables[0].Rows)
{

J += "<li>" + "<p>" + Row["UserName"].ToString() + "<span>" + Row["SendTime"].ToString() + "</span>" + "</P>" + Row["Content"].ToString() + "</li>";

}
}
context.Response.Write(J);

Helper.Connection.Close();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}

```
### 插入讀取數據數據庫

```微信

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Data;
namespace WebApplication15
{
/// <summary>
/// Handler2 的摘要說明
/// </summary>
public class Handler2 : IHttpHandler 
{
DBHelper H = new DBHelper();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string Cont = context.Request["Content"].ToString();
if (Cont != null)
{
Get(context,Cont);
}
}
public void Get(HttpContext context,string Cont)
{

string sql = "Insert Into Content values(@name,@time,@con)";
SqlParameter[] par = new SqlParameter[] {
new SqlParameter("@con", Cont),
new SqlParameter("@name", Global.Name_),
new SqlParameter("@time", DateTime.Now) };
H.QuerOne(sql, par, CommandType.Text);
}

public bool IsReusable
{
get
{
return false;
}
}
}
}