#### 很容易理解 插入数据 到数据库 在使用 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)


## 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[];
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[].Rows != null)
{
foreach (DataRow Row in Ds.Tables[].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

WebForm+一般处理程序+Ajax聊天的更多相关文章

  1. PHP+ajax聊天室源码!支持长轮循跟定时请求两种

      var lastID = "1";//声明上次取回的消息的ID var isposted = false; var mGetTime;//设置setTimeout的返回值 // ...

  2. webform 中使用ajax

    常用的方式有 js –> WebService  , js->*.ashx, js->WebAPI, js->MVC Controller->Action. 前两种就不说 ...

  3. WebForm页面使用Ajax

    AJAX:”Asynchronous JavaScript and XML” 中文意思:异步JavaScript和XML.指一种创建交互式网页应用的网页开发技术.AJAX并非缩写词,而是由Jesse ...

  4. 在webform中使用ajax

    如果你用过Asp.net webform, 说明你也算是.NET 开发的老兵了.WEBform应该是2011-2013左右,当时还用visual studio 2005. visual studio ...

  5. WebForm下的$.ajax中contentType: “application/json” 的用法

    不使用contentType: “application/json”则data可以是对象 $.ajax({ url: actionurl, type: "POST", datTyp ...

  6. 一般处理程序,ajax

    一般处理程序调用session: 在.aspx.cs页中读写Session都是Session["***"]就可以获取或者写入.但是在一般处理程序也就是ashx页面中,再这样写的话, ...

  7. Ajax聊天

    结构: index.html <!DOCTYPE html> <html> <head> <title>index.html</title> ...

  8. ASP.NET webform基于Jquery,AJAX的三级联动

    主要html代码 <select id="province"> <option value="0">--请选择省份--</opti ...

  9. Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室

    思路 消息显示区 发消息 板块 消息显示 消息发送 优化 显示非重复性的数据 优化显示 加上滚动条 每次都显示最新消息 完整代码 前端代码 数据库表结构 服务器端代码 总结与展望 总结 展望 为更好的 ...

随机推荐

  1. Python+Appium 查找 toast 方法的封装

    使用场景:在操作应用时常见toast弹框,通过toast弹框信息的获取判断当前的某个操作是否成功 引用的包:from selenium.webdriver.support import expecte ...

  2. Eureka的基本功能和用法

    1.基础架构 eueka按逻辑上可以划分为3个模块,eureka-server,service-provider,service-consumereureka-server:服务端,提供服务注册和发现 ...

  3. python接口自动化(二十五)--unittest断言——下(详解)

    简介 本篇还是回归到我们最初始的话题,想必大家都忘记了,没关系看这里:传送门  没错最初的话题就是登录,由于博客园的登录机制改变了,本篇以我找到的开源免费的登录API为案例,结合 unittest 框 ...

  4. SpringBoot之旅第四篇-web开发

    一.引言 有了自动配置,springboot使web开发变得简单,这个在springboot之旅中的第一篇中就有体现,实际的开发中当然不会这么简单,很多时候我们都需要自己去定制一些东西.web开发的东 ...

  5. Java工程师必备书单

    微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...

  6. 在已有的Asp.net MVC项目中引入Taurus.MVC

    Taurus.MVC是一个优秀的框架,如果要应用到已有的Asp.net MVC项目中,需要修改一下. 1.前提约定: 走Taurus.MVC必须指定后缀.如.api 2.原项目修改如下: web.co ...

  7. Java基础练习2(构造方法)

    1.以下关于面向对象概念的描述中,不正确的一项是() A.在构造方法中,this()只能出现在构造方法第一行位置 B.在构造方法中,super()只能出现在构造方法第一行位置 C.this()和sup ...

  8. vue slot+传参

    插槽分为默认插槽和具名插槽: 默认插槽: //父组件<div> <h3>父组件</h3> <testChild> <div>默认插槽< ...

  9. Oracle数据库知识要点

    一.卸载安装(来自百度经验) 完全卸载: 1. 停止相关服务 2. 运行Universal Installer,卸载产品 3. 清理注册表 4. 重启电脑,删除目录(Oracle文件夹和app文件夹) ...

  10. 3星|《绩效使能:超越OKR》:较全较新资料汇编,华为实施经验少

    全书是关于绩效管理与OKR的比较新比较全的资料汇编.从泰勒的科学管理说起,一直到现代的KPI.最近的OKR.梳理了工业革命以来重要的绩效管理思想的具体方法.适应情况,详细讲OKR的来龙去脉.适应情况. ...