Ajax留言板　

最新推荐文章于 2022-11-01 11:55:20 发布
最新推荐文章于 2022-11-01 11:55:20 发布
阅读量1.1k 收藏
点赞数
分类专栏： .net 文章标签： ajax xmlhttprequest dataset function javascript div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyldir/article/details/4164714
版权

*******************message.aspx***********************

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

<!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>
    <script src="JScript.js" type="text/javascript"></script>
    <style type="text/css">
        .style1
        {
            width: 100%;
            height: 344px;
        }
        .style2
        {
        }
        .style3
        {
            height: 306px;
        }

body
{
    text-align:center;
    margin:auto auto 20px auto;
    font-size:12px;
    font-family:宋体;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="height: 351px">
   
        <table class="style1">
            <tr>
                <td class="style3">
                    <div style="height: 100%" id="left_word">加载留言中……</div>
                    </div>
                </td>
                <td class="style2" rowspan="2">
                    <div style="height: 100%; id="div_top">
        <div>
        <span>姓名：</span>
        <input type="text" id="username"/>
        </div>
        <div>
        <span>性别：</span>
        <input type="radio"  value="男" name="sex" id="sexa"  checked />男&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" value="女"  name="sex" id="sexb" /> 女</div>   
        <div>
        <span>&nbsp;&nbsp;QQ：</span>
        <input type="text" id="qq" />
   
    </div>
    <div>
        <span>邮箱：</span>
        <input type="text" id="mail" />
    </div>
    <div>
        <textarea style="width:100%;height:300px" id="txt"></textarea>   
    </div>
    <div style="text-align:center">
      <input type="button" value="确定留言" οnclick="chk(this)" id="btn_submit"/>
    </div>
</div>
                </td>
            <tr>
                <td>
                    <div style="height: 100%">
    <a href="javascript:firstpage()">首页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="javascript:previoustpage()">上一页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="javascript:nextpage()">下一页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="javascript:lastpage()">尾页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    第<span id="page">1</span>页
    /共<span id="pagecount">1</span>页
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

 

 

**************************************write.aspx********************************

 

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.OleDb;

public partial class write : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

        if (Request.QueryString["add"] == "yes")
        {

            //OleDbConnection conn = connMdb.createConnMdb();
         OleDbConnection conn=new OleDbConnection("provider=microsoft.jet.oledb.4.0;data source=" + Server.MapPath("guestbookData.mdb"));
            OleDbDataAdapter oda = new OleDbDataAdapter();
            oda.SelectCommand = new OleDbCommand("select * from wordData", conn);
            DataSet ds = new DataSet(); //创建一个离线的数据集对象
            oda.Fill(ds,"wordData");

            DataRow dr = ds.Tables[0].NewRow(); //新建一个数据行
            dr["username"] = Request.Form["username"]; //给该数据字段赋值
            dr["sex"]=Request.Form["sex"];
            dr["qq"]=Request.Form["bb"];
            dr["mail"]=Request.Form["mail"];
            dr["left_content"] = Request.Form["txt"].Replace(" < ", "&lt; ").Replace("> ", "&gt; ").Replace("/r/n", " <br> ").Replace("       ", "&nbsp; ");
            ds.Tables[0].Rows.Add(dr); //把新建的行添加进数据表中

            //编译命令，把对离线的数据库的操作，转换编译成真实的对应命令
            OleDbCommandBuilder odb = new OleDbCommandBuilder(oda);
           
            oda.Update(ds,"wordData"); //对离线数据库做的更改，回写到真实数据库中

        }

    }

}

 

**********************************game

 

<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="false" CodeFile="getwordData.aspx.cs" Inherits="getwordData" %>
<%@ Import Namespace="System.Data" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Repeater ID="Repeater1" runat="server">
        <HeaderTemplate><table align="center" border="1" width="90%" cellpadding="8" cellspacing="0" style="border-collapse:collapse"></HeaderTemplate>
        <ItemTemplate>
        <tr>
            <td style="text-align:left">
                 【编号：<%# ((DataRowView)Container.DataItem)["ID"] %>】
                 【姓名：<%# ((DataRowView)Container.DataItem)["username"] %>】
                 【性别：<%# ((DataRowView)Container.DataItem)["sex"] %>】
                 【QQ：<%# ((DataRowView)Container.DataItem)["qq"] %>】
                 【邮箱：<%# ((DataRowView)Container.DataItem)["mail"] %>】
            </td>
        </tr>
        <tr><td style="text-align: left"><%# ((DataRowView)Container.DataItem)["left_content"]%></td></tr>
        </ItemTemplate>
        <SeparatorTemplate></table><br /><br /><table align="center" border="1" width="90%" cellpadding="8" cellspacing="0" style="border-collapse:collapse"></SeparatorTemplate>
        <FooterTemplate></table></FooterTemplate>
        </asp:Repeater>
   
    </div>
    </form>
</body>
</html>

*************cs代码*************

 

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.OleDb;

public partial class getwordData : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //OleDbConnection conn = connMdb.createConnMdb();
     OleDbConnection conn=new OleDbConnection("provider=microsoft.jet.oledb.4.0;data source=" + Server.MapPath("guestbookData.mdb"));
        OleDbDataAdapter oda = new OleDbDataAdapter();
        oda.SelectCommand = new OleDbCommand("select * from wordData order by ID desc", conn);
        DataSet ds = new DataSet();
        oda.Fill(ds,"wordData");
        int page=0;
        if (Request.QueryString["page"] != null)
        {
            page=Convert.ToInt16(Request.QueryString["page"]);
        }
        PagedDataSource pds = new PagedDataSource();
        pds.DataSource = ds.Tables[0].DefaultView;
        pds.AllowPaging = true;
        pds.PageSize = 4;
        if (page >= pds.PageCount) //如果传递过来的页码大于最大页码，则取最大页码
        {
            page = pds.PageCount-1;
        }
        pds.CurrentPageIndex = page;
        this.Repeater1.DataSource = pds;
        this.Repeater1.DataBind();
        Response.Write("pagecount=" + pds.PageCount.ToString()); //最大页码

    }
}

 

 

********************************************Jscript.js**************************************************

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

function chk()
{
    if( $("username").value=="" )
    {
        alert("姓名不能为空！");
        $("username").focus();
    }
    else if( $("qq").value=="" )
    {
        alert("QQ不能为空！");
        $("qq").focus();
    }
    else if( $("mail").value=="" )
    {
        alert("邮箱不能为空！");
        $("mail").focus();
    }
    else if( $("txt").value=="" )
    {
        alert("内容不能为空！");
        $("txt").focus();
    }
    else
    {
        arguments[0].disabled=true;
        arguments[0].value="发送中…";
        var sex="男";
        if($("sexb").checked==true)
        {
            sex="女";
        }
        var strdata;
        strdata="username="+$("username").value; //姓名
        strdata+="&sex="+sex; //性别
        strdata+="&bb="+$("qq").value; //QQ
        strdata+="&mail="+$("mail").value;  //邮箱
        strdata+="&txt="+$("txt").value;
        var xmlhttp;
        if(window.ActiveXObject)
        {
            try
            {
                xmlhttp=new ActiveXObject("msxml2.xmlhttp.3.0");
            }
            catch(e)
            {
                xmlhttp=new ActiveXObject("microsoft.xmlhttp");
            }
        }
        else if(window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
//      xmlhttp.open("post","write.aspx?add=yes&st="+new Date().getTime(),true);
        xmlhttp.open("post","write.aspx?add=yes")
        xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xmlhttp.send(strdata);
        xmlhttp.onreadystatechange=function()
        {
            if(xmlhttp.readystate==4)
            {
                if(xmlhttp.status==200)
                {
                    $("btn_submit").disabled=false;
                    $("btn_submit").value="确定留言";
                    alert("留言成功！");
                    window.location.href="message.aspx"; 
                }
  else
  {
   alert("服务返回错误！");
  }
            }
        }
     }
}

function firstpage()
{
    document.getElementById("left_word").innerHTML="加载留言中……";
    getpagedata(0);
    document.getElementById("page").innerHTML=1;
}

function previoustpage()
{
  
    var page=parseInt(document.getElementById("page").innerHTML);
    if(page<=1)
    {
        alert("不能再上一页了");
    }
    else
    {
        document.getElementById("left_word").innerHTML="加载留言中……";
        page=page-1;
        getpagedata(page-1);
        document.getElementById("page").innerHTML=page;
    }
}

function nextpage()
{
    var page=parseInt(document.getElementById("page").innerHTML);
    var pagecount=parseInt(document.getElementById("pagecount").innerHTML);
    if(page>=pagecount)
    {
        alert("不能再下一页了");
    }
    else
    {
        document.getElementById("left_word").innerHTML="加载留言中……";
        var page=parseInt(document.getElementById("page").innerHTML); 
        getpagedata(page);
        page=page+1;
        document.getElementById("page").innerHTML=page;
    }
}

function lastpage()
{
    var page=parseInt(document.getElementById("pagecount").innerHTML);
     getpagedata(page-1);
     document.getElementById("page").innerHTML=page;
}

function getpagedata(page)
{
    var xmlhttp;
    if(window.ActiveXObject)
    {
        try
        {
            xmlhttp=new ActiveXObject("msxml2.xmlhttp.3.0");
        }
        catch(e)
        {
            xmlhttp=new ActiveXObject("microsoft.xmlhttp");
        }
    }
    else if(window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    xmlhttp.open("get","getwordData.aspx?page="+page+"&st="+new Date().getTime(),true);
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readystate==4)
        {
            if(xmlhttp.status==200)
            {
                var strhtml=xmlhttp.responseText;
                var pagecount; //最大页码数
                pagecount=strhtml.match(/pagecount/=/d+/); //在返回的数据中，匹配出最大页码
                pagecount=parseInt(pagecount[0].split("=")[1]);
                strhtml=(strhtml.match(/<table[/s/S]*table>/g))[0];
                document.getElementById("left_word").innerHTML=strhtml;
                document.getElementById("pagecount").innerHTML=pagecount;
            }
     else
    {
  alert("服务器返回错误！");
    }
        }
    }
    xmlhttp.send(null);
}
getpagedata(0);

yyldir
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
XML+ajax 留言板
09-19
利用XML和ajax 技术实现无刷新技术留言板。数据来源是从xml读取
Web前端必做笔记之一：实现AJAx
qq_42302014的博客
10-26 112
Web前端必做笔记之一：实现AJAx <script> function myAjax(url){ const promise = new Promise((resolve,reject) =>{ //异步请求，定义个Promise对象让我们能够在外面拿到结果 const xhr = new XMLHttpRequest(); xhr.open('GET',url,true); //open方法初始化，第一个参数为请求方法，第二个参数为
ajax实现留言板功能 -
i小明同学的博客
06-15 4700
首先理解ajax是实现页面无刷新效果,留言就是要这种效果,当发布留言时候直接展示留言内容在下面. 好了直接上代码 1.新建一个控制器,内容如下:   &lt;?php namespace app\index\controller; use think\Controller; class Index extends Controller { public function in...
Ajax留言板
weixin_34088598的博客
12-26 184
在整理以前资料时偶尔发现有一个效果不错的Ajax留言板程序，是以前一个系统的一个部分。今天抽了点时间，将其独立成一个项目，与大家分享下，先来看下具体的效果图：   思路很简单，就是一般的Ajax系统，主要是里面的一些jQuery的特效确实不错。下面是实现步骤： 环境：Visual Studio 2010 + SQL Server 2008 + jQuery1.4.1   1...
AJAX实例--留言板
小允子的博客
05-31 2105
留言本         zmouse 说 : 内容 顶(0) |  踩(0) -->         显示更多...                              退出                      注册 用户名：          
Ajax留言板源码 1.1
05-01
一、源码描述 这是一款采用了ASP.NET+jQuery1.4技术实现了ajax无刷新分页留言板源码，对于C#初学者来说比较具有学习价值，有需要的可以下载看看。二、功能介绍 该源码主要实现了主要jquery ajax静态页面查询添加 ...
ajax留言板
08-29
使用jsp+ajax实现的留言板，支持异步提交，同步刷新。大三ajax大作业，附带源代码，设计报告和access数据库备份文件。初学者可以参考和学习。
Ajax留言板怎么做步骤
04-02
Ajax留言板怎么做步骤 Ajax留言板怎么做步骤 Ajax留言板怎么做步骤
AJAX学习
dongliheng的专栏
06-16 567
由于ajax为我们带来太多的好处，所以在很多应用中我们都会优先选择这种技术，于是我也为之所吸引，现跟大家分享下一个简单的入门例子。regist.jsp文件：一个简单的注册页面    %>注册页面     function myAlert(strTitle) {        var message=document.getElementById("myDiv").innerHTML;      
一个ajax的留言板
12-17
一个用ajax实现的留言板，对初学者学习非常有帮助，感谢柯乐！
JavaWeb购物系统（四）留言板的实现
喃灬疯的博客
11-01 1887
留言板第一次进来，应该获取的第一页也内容（每页显示五条内容），如果超过五条内容就进行分页，这里最关键的分页代码就是。这样的字符串，我这里前面加了 delete_ 是为了标识他的作用。因为普通的表单提交会跳转页面，我们留言是需要页面局部数据的刷新，所以我们使用。来标识每一条留言，在点击删除按钮的时候，携带每条留言的唯一ID标识，进而通过。在jsp中使用除法，得到的结果是小数，细心的小伙伴可以看出来，这里参数的。留言的提交，我们采用的是发送。，这样才能保证分页的正确。是要删除的当前留言对应的。
ajax聊天室(JSP版)2
剑心博客
09-13 2522
这一回主要谈谈上一篇文章给出的三个Java类的代码。消息类(Message)的代码很简单，只是普通的Javabean。唯一值得注意的是消息发送时间并没有使用Java的Date类型，而用了long数据类型。这样做是为了节省存储空间，加快运算，只有在需要显示时才进行Date类型的转换。publi cclass Message {    // 属于某房间(Room)    private
使用ajax出现的错误
m0_51915183的博客
06-04 718
使用servlet+ajax+html实现留言板功能错误总结
模拟留言本————代码实现
zcx_myvip的博客
03-22 290
模拟留言本 - www.baidu.com * { padding: 0; margin: 0; } li { list-style: none; } body { background: #f9f9f9; font-size: 14px; } #explain { height: 60px; border-bottom: 1px solid #999999; background: #ee
Ajax实现的留言本
zxingchao2009的专栏------用博客记录技术成长的点点滴滴
08-29 957
    首先用mysql建立数据库及表notebook:    create table notebook(id int not null primary key auto_increment,title varchar(50),author varchar(50),content varchar(1000),date varhcar(50));(1)liuyan.jsp(表现层) 
jsp实现ajax的一个例子
酸柠檬的专栏
12-18 2624
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），局部提出请求得到服务器响应，并将相应结果显示在客户端，不重新加载整个网页，异步更新！ 需要4步：1.获取xmlhttprequest对象，Ajax 的核心是 JavaScript 对象 XMLHttpRequest，这个对象的创建需要考虑浏览器！ 2.打开与服务器的连接，其中需
AJAX的一个JSP示例
ZHOUJIAOSHOU的专栏
05-21 715
这是学习AJAX的第一篇文章，我把自己学习一些心得写出来，因为是从初学者的脚度出发，可能会写得比较详细，因为我就是一个初学者，也知道作为一个初学者，随随便便的拿一个例子就看看，是只知道要这样，但为什么要这样却不清楚，我这里就尽我自己的语言，让初学者和我一样，能够看了这篇文章之后，“哦，这里原来是这样的”。我个人还是喜欢从实例出发，对我自己而言，看了过后如果没有实例巩固，效果就不会那么好，也就不会减
ajax聊天室(JSP版)1
狼群
07-07 1364
初学JSP编程，一般喜欢做做留言板、聊天室、购物网站或论坛等。下面我详细说说如何实现一个基于WEB的无刷新聊天室。注：参考了Struts版的 ajaxchat。平台或技术：Windows XP,JSP2.0,Servlet2.4,JSTL,Tomcat6,Ajax,Log4J,ant,eclipse等等。思路：1  页面（信息）刷新 由于基于HTTP协议的WEB决定了服务器
请写一个用ajax的留言板
最新发布
04-19
好的，下面是一个用ajax的留言板示例代码： HTML： ``` <textarea id="message-input"></textarea> 提交 <ul id="message-list"></ul> ``` JavaScript： ``` // 获取DOM元素 var messageInput = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值