#### 很容易理解 插入数据 到数据库 在使用 setInterval() 读取数据 显示在 页面中 好了 不废话 直接上代码 不会的 可以加我 微信 Jth11163
## 效果图片
## WebForm + Jquer + Css 代码
```
<%@ 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(一般处理程序) 代码
### 生成 随机名字
```
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; } } } }
```
原著 希望对你有所帮助 共同学习哈哈哈哈哈哈 啊哈哈哈
qq 2456314589