Jquery之Ajax_分页及增删改查

最新推荐文章于 2023-07-11 16:24:05 发布
最新推荐文章于 2023-07-11 16:24:05 发布
阅读量2.9k 收藏 12
点赞数 2
分类专栏： Asp.Net 文章标签： jquery ajax 分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songyi160/article/details/77532972
版权

一、UserInfoList.html代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>用户列表</title>
    <link href="../Css/tableStyle.css" rel="stylesheet" />
    <link href="../Css/themes/default/easyui.css" rel="stylesheet" />
    <link href="../Css/pageBarStyle.css" rel="stylesheet" />
    <link href="../Css/themes/icon.css" rel="stylesheet" />
    <script src="../Js/jquery-1.7.1.js"></script>
    <script src="../Js/jquery.easyui.min.js"></script>
    <script src="../Js/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#detailDiv").css("display", "none");
            $("#addUserDiv").css("display", "none");
            $("#editUserDiv").css("display", "none");
            //$("#dlg").dialog('close');
            loadUserInfo(1);
            $("#addUserInfo").click(function () {
                bindAddClick();
            });

        });
        //展示添加用户数据表单
        function bindAddClick() {
            $("#addUserDiv").css("display", "block");
            $('#addUserDiv').dialog({
                width: 300,
                height: 300,
                title: "添加用户信息",
                collapsible: true,
                maximizable: true,
                resizable: true,
                modal: true,
                buttons: [{
                    text: 'Ok',
                    iconCls: 'icon-ok',
                    handler: function () {
                        //获取用户在添加表单中输入的数据，然后同AJAX发送服务端。
                        addUser();
                    }
                }, {
                    text: 'Cancel',
                    handler: function () {
                        $('#addUserDiv').dialog('close');
                    }
                }]
            });
        }
        //完成用户添加
        function addUser() {
            //获取用户在添加表单中输入的数据
            var pars = $("#addUserForm").serializeArray();//{"txtUserName":"zhangsan",}
            $.post("AddUserInfo.ashx", pars, function (data) {
                if (data == "ok") {
                    //清除添加表单中输入的数据
                    $("#addUserForm input").val("");
                    //关闭添加窗口
                    $('#addUserDiv').dialog('close');
                    //删除表格旧数据
                    $("#tabList tr:gt(0)").remove();
                    //重新给表格添加数据
                    loadUserInfo();
                } else {
                    $.messager.alert("提示","添加失败","error");
                }
            });
        }
        //加载用户数据
        function loadUserInfo(pageIndex) {
            $.post("UserList.ashx", {"pageIndex":pageIndex}, function (data) {
                var serverData = $.parseJSON(data);
                var serverDataLength = serverData.UList.length;
                for (var i = 0; i < serverDataLength; i++) {
                    $("<tr><td>" + serverData.UList[i].Id + "</td><td>" + serverData.UList[i].UserName + "</td><td>" + serverData.UList[i].UserPass + "</td><td>" + serverData.UList[i].Email + "</td><td>" + ChangeDateFormat(serverData.UList[i].RegTime) + "</td><td><a href='javascript:void(0)' class='deletes' dId='" + serverData.UList[i].Id + "'>删除</a></td><td><a href='javascript:void(0)' class='details' nId='" + serverData.UList[i].Id + "'>详细</a></td><td><a href='javascript:void(0)' class='edits' eId='" + serverData.UList[i].Id + "'>编辑</a></td></tr>").appendTo("#tabList");
                }
                //将页码条加到DIV上。
                $("#pageBarDiv").html(serverData.MyPageBar);
                bindMyPageBarClick();//给数字页码加单击事件
                bindDetailClick();//注意：一定要表格中所有的数据加载完成了，才能给表格中的超链接加单击事件。
                bindDeleteClick();//删除
                bindEditClick();//编辑
            });
        }
        //给数字页码加单击事件
        function bindMyPageBarClick() {
            $(".myPageBar").click(function () {
                var pageIndex = $(this).attr('href').split('=')[1];
                $("#tabList tr:gt(0)").remove();
                loadUserInfo(pageIndex);
                return false;//不用在执行超链接。给a标签添加单击事件后会先执行单击事件，再执行超链接事件。
            });
        }


        //展示要修改的数据.
        function bindEditClick() {
            $(".edits").click(function () {
                var id = $(this).attr("eId");
                $.post("ShowDetail.ashx", { "id": id }, function (data) {
                    var serverData = $.parseJSON(data);
                    $("#editUserId").val(serverData.Id);
                    $("#eidUserName").val(serverData.UserName);
                    $("#editUserPwd").val(serverData.UserPass);
                    $("#editUserMail").val(serverData.Email);
                    $("#editRegTime").val(ChangeDateFormat(serverData.RegTime));
                    $("#editUserDiv").css("display", "block");
                    $('#editUserDiv').dialog({
                        width: 300,
                        height: 300,
                        title: "修改用户信息",
                        collapsible: true,
                        maximizable: true,
                        resizable: true,
                        modal: true,
                        buttons: [{
                            text: 'Ok',
                            iconCls: 'icon-ok',
                            handler: function () {
                                editUserInfo();
                            }
                        }, {
                            text: 'Cancel',
                            handler: function () {
                                $('#editUserDiv').dialog('close');
                            }
                        }]
                    });
                });
            });
        }
        //完成数据更新
        function editUserInfo() {
            var pars = $("#editUserForm").serializeArray();
            $.post("EditUserInfo.ashx", pars, function (data) {
                if (data == "yes") {
                    //关闭添加窗口
                    $('#editUserDiv').dialog('close');
                    
                    //删除表格旧数据
                    $("#tabList tr:gt(0)").remove();
                    //重新给表格添加数据
                    loadUserInfo();
                } else {
                    $.messager.alert("提示", "修改失败", "error");
                }

            });
        }

        //展示详细信息
        function bindDetailClick() {
            $(".details").click(function () {
                var id = $(this).attr("nId");
                $.post("ShowDetail.ashx", { "id": id }, function (data) {
                    var serverData = $.parseJSON(data);
                    $("#userName").text(serverData.UserName);
                    $("#userPwd").text(serverData.UserPass);
                    $("#userMail").text(serverData.Email);
                    $("#detailDiv").css("display", "block");
                    $('#detailDiv').dialog({
                        width: 300,
                        height: 300,
                        title: "用户详细信息",
                        collapsible: true,
                        maximizable: true,
                        resizable: true,
                        modal:true,
                        buttons:[{
                            text:'Ok',
                            iconCls:'icon-ok',
                            handler:function(){
                                alert('ok');
                            }
                        },{
                            text:'Cancel',
                            handler:function(){
                                $('#detailDiv').dialog('close');
                            }
                        }]
                    });
 
                });
            });
        }

        //删除数据
        function bindDeleteClick() {
            $(".deletes").click(function () {
                var id = $(this).attr("dId");
                $.messager.confirm("删除提示", "你确定要删除该记录吗?", function (r) {
                    if (r) {//如果该条件成立，表示用户单击了"确定"按钮
                        $.post("DeleteUser.ashx", { "id": id }, function (data) {
                            if (data == "ok") {
                                //清除表格中原有的数据
                                $("#tabList tr:gt(0)").remove();
                               //将新数据加载到表格上。
                                loadUserInfo();
                                $.messager.show({
                                    title: '提示',
                                    msg: '删除成功',
                                    showType: 'show'
                                });

                            } else {
                                $.messager.alert("提示","删除失败!!","error");
                            }

                        });
                    }
                });
            });
        }


        //将序列化成json格式后日期(毫秒数)转成日期格式
        function ChangeDateFormat(cellval) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }

    </script>
</head>
<body>
    <a href="javascript:void(0)" id="addUserInfo">添加用户</a>
    <table id="tabList">
     <tr><th>编号</th><th>用户名</th><th>密码</th><th>邮箱</th><th>时间</th><th>删除</th><th>详细</th><th>编辑</th></tr>

    </table>
    <div id="pageBarDiv" class="page_nav"></div>

    <!------------详细信息------------------>
    <div id="detailDiv">
        <table>
            <tr>
                <td>用户名</td><td><span id="userName"></span></td>
            </tr>
             <tr>
                <td>密码</td><td><span id="userPwd"></span></td>
            </tr>
             <tr>
                <td>邮箱</td><td><span id="userMail"></span></td>
            </tr>
        </table>
    </div>
    <!----------------添加用户信息------------------->

    <div id="addUserDiv">
        <form id="addUserForm">
            <table>
                <tr><td>用户名</td><td><input type="text" name="txtUserName"/></td></tr>
                  <tr><td>密码</td><td><input type="password"  name="txtUserPwd"/></td></tr>
                  <tr><td>邮箱</td><td><input type="text" name="txtUserMail"/></td></tr>
            </table>
        </form>
    </div>


    <!-------------------编辑用户的数据--------------------->
        <div id="editUserDiv">
        <form id="editUserForm">
            <input type="hidden" name="txtEditUserId" id="editUserId" />
            <input type="hidden" name="txtEditRegTime" id="editRegTime" />
            <table>
                <tr><td>用户名</td><td><input type="text" name="txtEditUserName" id="eidUserName"/></td></tr>
                  <tr><td>密码</td><td><input type="text"  name="txtEditUserPwd" id="editUserPwd"/></td></tr>
                  <tr><td>邮箱</td><td><input type="text" name="txtEditUserMail" id="editUserMail"/></td></tr>
            </table>
        </form>
    </div>


   <!-- <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="$('#dlg').dialog('open')">Open</a>


    <div id="dlg" class="easyui-dialog"  title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
		The dialog content.
	</div>-->


</body>
</html>
二、UserList.ashx.cs代码 
using CZBK.ItcastProject.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CZBK.ItcastProject.WebApp._2015_6_3
{
    /// <summary>
    /// UserList 的摘要说明
    /// </summary>
    public class UserList : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            int pageIndex;
            if (!int.TryParse(context.Request["pageIndex"], out pageIndex))
            {
                pageIndex = 1;
            }
            int pageSize = 5;
            BLL.UserInfoService UserInfoService = new BLL.UserInfoService();
            int pageCount = UserInfoService.GetPageCount(pageSize);//获取总页数.
            //判断当前页码值的取值范围。
            pageIndex = pageIndex < 1 ? 1 : pageIndex;
            pageIndex=pageIndex>pageCount?pageCount:pageIndex;
            //获取分页数据
            List<UserInfo>list=UserInfoService.GetPageList(pageIndex,pageSize);
            //获取页码条。
            string pageBar = Common.PageBarHelper.GetPagaBar(pageIndex, pageCount);

            System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
            string str = js.Serialize(new  { UList = list, MyPageBar = pageBar });//将数据序列化成JSON字符串。匿名类。
          context.Response.Write(str);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
三、ShowDetail.ashx.cs代码 
using CZBK.ItcastProject.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CZBK.ItcastProject.WebApp._2015_6_3
{
    /// <summary>
    /// ShowDetail 的摘要说明
    /// </summary>
    public class ShowDetail : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            int id = Convert.ToInt32(context.Request["id"]);
            BLL.UserInfoService UserInfoService = new BLL.UserInfoService();
            UserInfo userInfo=UserInfoService.GetUserInfo(id);
            System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
            context.Response.Write(js.Serialize(userInfo));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
四、AddUserInfo.ashx.cs代码 
using CZBK.ItcastProject.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CZBK.ItcastProject.WebApp._2015_6_3
{
    /// <summary>
    /// AddUserInfo 的摘要说明
    /// </summary>
    public class AddUserInfo : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            UserInfo userInfo = new UserInfo();
            userInfo.UserName = context.Request["txtUserName"];
            userInfo.UserPass = context.Request["txtUserPwd"];
            userInfo.Email = context.Request["txtUserMail"];
            userInfo.RegTime = DateTime.Now;
            BLL.UserInfoService UserInfoService = new BLL.UserInfoService();
            if (UserInfoService.AddUserInfo(userInfo))
            {
                context.Response.Write("ok");
            }
            else
            {
                 context.Response.Write("no");
            }
            
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
五、DeleteUser.ashx.cs代码 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CZBK.ItcastProject.WebApp._2015_6_3
{
    /// <summary>
    /// DeleteUser 的摘要说明
    /// </summary>
    public class DeleteUser : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            int id = Convert.ToInt32(context.Request["id"]);
            BLL.UserInfoService UserInfoService = new BLL.UserInfoService();
            if (UserInfoService.DeleteUserInfo(id))
            {
                context.Response.Write("ok");
            }
            else
            {
                context.Response.Write("no");
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
六、EditUserInfo.ashx.cs代码 
using CZBK.ItcastProject.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CZBK.ItcastProject.WebApp._2015_6_3
{
    /// <summary>
    /// EditUserInfo 的摘要说明
    /// </summary>
    public class EditUserInfo : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            UserInfo userInfo = new UserInfo();
            userInfo.UserName = context.Request["txtEditUserName"];
            userInfo.UserPass = context.Request["txtEditUserPwd"];
            userInfo.Email = context.Request["txtEditUserMail"];
            userInfo.Id = Convert.ToInt32(context.Request["txtEditUserId"]);
            userInfo.RegTime = Convert.ToDateTime(context.Request["txtEditRegTime"]);
            BLL.UserInfoService UserInfoService = new BLL.UserInfoService();
            if (UserInfoService.EditUserInfo(userInfo))
            {
                context.Response.Write("yes");
            }
            else
            {
                context.Response.Write("no");
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
七、PageBarHelper.cs代码 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace CZBK.ItcastProject.Common
{
   public class PageBarHelper
    {
       public static string GetPagaBar(int pageIndex, int pageCount)
       {
           if (pageCount == 1)
           {
               return string.Empty;
           }
           int start = pageIndex - 5;//计算起始位置.要求页面上显示10个数字页码.
           if (start < 1)
           {
               start = 1;
           }
           int end = start + 9;//计算终止位置.
           if (end > pageCount)
           {
               end = pageCount;
               //重新计算一下Start值.
               start = end - 9 < 1 ? 1 : end - 9;
           }
           StringBuilder sb = new StringBuilder();
           if (pageIndex > 1)
           {
               sb.AppendFormat("<a href='?pageIndex={0}' class='myPageBar'>上一页</a>", pageIndex - 1);
           }
           for (int i = start; i <= end; i++)
           {
               if (i == pageIndex)
               {
                   sb.Append(i);
               }
               else
               {
                   sb.AppendFormat("<a href='?pageIndex={0}' class='myPageBar'>{0}</a>",i);
               }
           }
           if (pageIndex < pageCount)
           {
               sb.AppendFormat("<a href='?pageIndex={0}' class='myPageBar'>下一页</a>", pageIndex + 1);
           }

           return sb.ToString();
       }
    }
}


songyi160
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery实现增、删、改、查，分页功能
Hello_yhr的博客
09-17 338
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> .
第9讲：使用ajax技术实现增删改查及分页显示功能（jQuery）
软件之家的博客
06-23 1244
本讲内容首先讲解jQuery对ajax的支持，分别讲解$.post,$.get,$.ajax等方法，这些方法的参数，使用方法及区别。最后对ajax的综合应用举例：在同一个页面实现新增，修改，删除学校资料，分页列表等功能，前端使用html静态页面，使用MySQL数据库，后台使用servlet技术实现。
MVC+jQuery.Ajax异步实现增删改查和分页
10-22
主要为大家详细介绍了MVC结合jQuery.Ajax异步实现增删改查和分页的相关资料，感兴趣的小伙伴们可以参考一下
ajax实现增删查改
qq_57104988的博客
08-29 1780
【代码】ajax实现增删查改。
SSM框架用Ajax增删改查一个页面（简单易懂）
最新发布
passerby的博客
07-11 734
async: false是ajax中的一个参数，它表示是否异步执行请求。当async为false时，请求将会同步执行，即在请求完成之前，浏览器将会被锁定，用户无法进行其他操作。这种方式一般不推荐使用，因为会影响用户体验。而当async为true时，请求将会异步执行，即在请求过程中，浏览器不会被锁定，用户可以进行其他操作。这种方式更加常用，因为可以提高页面的响应速度和用户体验。 3.3，属性display:none Ajax不切换页面，所有内容在一个页面，只需要通过style的属性display，将值设置
SSH三大框架整合+ajax应用+jquery+json应用+分页+增删改查
04-11
标题内容已经写的很清楚了 映射表，自己用吧。
Javaweb增删改查之简易项目，包括分页功能
08-01
此项目是一个简易的Java项目，运用了Java框架，jQuery，ajax，json，MySQL等技术，但此项目尚不完整，仅作为本人笔记只用，请勿下载
Springmvc+maven+ajax+jquery+json+mybatis登录增删改查详细注释
08-24
Springmvc+maven+ajax+jquery+json+mybatis做的登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用Eclipse和IntelliJ IDEA 13.1.3均可运行出来.并且付有sql脚本.可直接...
【jQuery】对话框插件——dialog
O(∩_∩)O
12-22 1124
对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()和confirm()函数的功能，它的调用格式为： $(selector).dialog({options}); selector参数为显示弹出对话框的元素，通常为，options参数为方法的配置对象，在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。 例如，当点击“提交”按钮
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
10-18
主要介绍了jQuery+datatables插件实现ajax加载数据与增删改查功能,涉及jQuery结合datatables插件针对页面表格实现数据加载及增删改查等相关操作技巧,需要的朋友可以参考下
一个页面实现Ajax效果的增删改查-JQuery+Json版
08-25
一个页面实现Ajax效果的增删改查-JQuery+Json版包含数据库
jquery ajax实现用户登录及员工信息的增删改查的ssm框架(待完善service)
Liu_wen_wen的博客
08-27 350
jquery ajax实现用户登录及员工信息的增删改查的ssm框架
用ajax+jquery+json+css3+html5实现登录、注册、以及主页面的增删改查
qq_41380430的博客
10-26 5461
主要思路 在登录界面，输入用户名和密码，失焦的时候，判断输入的用户名和密码是否符合相应的正则表达式的要求。如果符合，就发送ajax请求到服务端，服务端接受到请求，就把从页面中传来的数据和json文件里面的数据进行对比，如果有相同的数据，就返回1，通过后台传回的数据1，就在前端页面上，就在前端页面中实现允许跳转主页面的操作。如果没有相同的，就返回2，通过后台传回的数据2，就在前端页面上，弹出 该...
ASP.Net之使用Cookie和Session实现自动登录
松一160
06-30 5133
一、UserLogin.aspx代码 window.onload = function () { var validateCode = document.getElementById("validateCode"); validateCode.onclick = function () {
Jquery之Ajax实例_登录
松一160
08-23 2754
一、Login.html代码 $(function () { $("#msg").css("display","none"); $("#btnLogin").click(function () { userLogin(); });
WebApp上传文件
松一160
06-21 2349
一、解决方案目录结构 二、FileUp.html代码 <!--enctype="multipart/form-data":如果要上传文件必须加上该属性，指定相应的编码。 只有这样用户选择的文件数据（文件流）才会放在请求报文中，发送给服务器。 表单中的其它表单元素（文本框等），也会发送到服务端，但是格式也变了，
VS2017IIS注册
松一160
06-19 2091
一般情况下要先安装IIS再装.Net Framework，这样可以保证.net的部分功能可以绑定到IIS，若安装顺序不对，可以后注册IIS，步骤如下： (1)在开始菜单中找到VS安装目录下的命令行提示符，以管理员身份运行。 (2)输入IIS注册命令：aspnet_regiis -i
jquery+ajax实现增删改查
04-24
jQuery AJAX 实现增删改查操作的基本原理如下： 1. 首先，利用 jQuery 提供的 AJAX 方法向服务器发送请求，一般是通过 GET 或 POST 方法发送。 2. 接着，服务器接收到请求后进行相应的处理，比如从数据库中取出...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值