Ajax无刷新添加评论(JQuery版)

最新推荐文章于 2021-08-06 17:57:36 发布

yx017893

最新推荐文章于 2021-08-06 17:57:36 发布

阅读量2.6k

点赞数

分类专栏： Ajax JQuery 文章标签： ajax jquery textbox server 服务器 string

本文链接：https://blog.csdn.net/yx017893/article/details/6762020

版权

Ajax 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

JQuery

4 篇文章 0 订阅

订阅专栏

用户点击提交按钮后通过Ajax提交参数给服务器,服务器添加进数据库后返回添加结果,页面根据服务器返回的结果判断,如果添加成功了,就把内容更新到页面上(append()方法).

对于用户来说,整个过程是无刷新的,不会打断用户操作.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="无刷新评论.aspx.cs" Inherits="Ajax_无刷新评论" %>

<!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="../js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        function InsertComment() {
            var name = $("#TextBox2").val();
            var content= $("#TextBox3").val() ;
            var time=new Date();

            $.post("InsertComment.ashx", { "name": name, "content": content, "time": time }, function(data, status) {
                if (status == "success") {//服务器返回成功
                    if (data == "success") {//添加成功
                        var tr = $("<tr><td>昵称:" + name + "<br/>时间:" + time + "</td><td>内容:" + content + "</td></tr>");
                        $("#table1").append(tr);//把内容更新到页面
                    }
                    else if (data == "error") {
                        alert("添加失败");
                    }
                    else {
                        alert("ajax error");
                    }
                }
                else {
                    alert("ajax error");
                }
            });

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server" Height="346px" Width="656px"></asp:TextBox>
    </div>
    <p>
        评论区:</p>
    <asp:Repeater ID="Repeater1" runat="server" DataSourceID="AccessDataSource1">
    <HeaderTemplate><table id="table1"></HeaderTemplate>
    <ItemTemplate><tr><td>昵称:<%# Eval("name") %><br />时间:<%# Eval("uptime") %></td><td>内容:<%# Eval("content") %></td></tr></ItemTemplate>
    <FooterTemplate></table></FooterTemplate>
    </asp:Repeater>  
    <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
        DataFile="~/App_Data/77feel.mdb" 
        SelectCommand="SELECT [name], [content], [uptime] FROM [comment] ORDER BY [uptime]">
    </asp:AccessDataSource>
    <br />
    发表评论:<br />
    昵称:<input ID="TextBox2" type="text" Width="157px"/>
    <br />
    内容:<input ID="TextBox3" type="text" Height="73px" Width="234px"/>
    <br />
    <input ID="Button1" type="button" value="提交" οnclick="return InsertComment()" />
    </form>
    </body>
</html>

服务器代码:InsertComment.ashx

<%@ WebHandler Language="C#" Class="InsertComment" %>

using System;
using System.Web;

public class InsertComment : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        var response = context.Response;
        var request = context.Request;
        string name = request["name"];
        string content = request["content"];
        string time = request["time"];
        jiang_Db newdb = new jiang_Db();
        try
        {
            newdb.ExecSql_None(string.Format("insert into comment([name],[content],[uptime]) values('{0}','{1}','{2}')",name,content,time));
            response.Write("success");
        }
        catch (Exception)
        {
            response.Write("error");
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

yx017893

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Ajax无刷新添加评论(JQuery版)

用户点击提交按钮后通过Ajax提交参数给服务器,服务器添加进数据库后返回添加结果,页面根据服务器返回的结果判断,如果添加成功了,就把内容更新到页面上(append()方法).对于用户来说,整个过程是无刷新的,不会打断用户操作.
复制链接

扫一扫