欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

asp.net中ajax和一般处理程序(handler.ashx)的交互

程序员文章站 2022-03-26 18:20:47
(记得引入js哦)我们假设这样一个场景,现在有一个删除界面。我们需要根据身份证来查询数据,并且将这个人的信息显示到对应的信息框中,点击删除按钮对该人的信息进行删除。这里就涉及到如何将输入的身份证信息传递到后端。并且将后端查询到的内容反馈给前端显示出来。现在我们就来实现这个过程。1.首先我们先做一个较为简单的页面,下面是我的页面以及对应的代码(buttun控件有点问题,所以使用了带样式的a标签来代替它)对应代码:(如果你复制了这段代码,a标签因为没有样式,所以可能显示不太一样)

(记得引入js哦)
我们假设这样一个场景,现在有一个删除界面。我们需要根据身份证来查询数据,并且将这个人的信息显示到对应的信息框中,点击删除按钮对该人的信息进行删除。这里就涉及到如何将输入的身份证信息传递到后端。并且将后端查询到的内容反馈给前端显示出来。现在我们就来实现这个过程。
1.首先我们先做一个较为简单的页面,下面是我的页面以及对应的代码(button控件有点问题,所以使用了带样式的a标签来代替它)
asp.net中ajax和一般处理程序(handler.ashx)的交互
对应代码:(如果你复制了这段代码,a标签因为没有样式,所以可能显示不太一样)

<table>
            <tr>
                <td>身份证号:</td>
                <td><input id="se_indentity"/></td>
                <td><a class="buttuns" onclick="Search()">查询</a></td>
            </tr>
            <tr>
                <td>姓名:</td>
                <td><input id="res_name"/></td>
                <td></td>
            </tr>
            <tr>
                <td>身份证号:</td>
                <td><input id="res_indentity"/></td>
                <td></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <input id="sexID1" name="sex" style="width: 30px" checked="checked" type='radio' value='男' />
                    <label for="sexID1">男 </label>
                    <input id="sexID2" name="sex" style="width: 30px" type='radio' value='女' />
                    <label for="sexID2">女  </label>
                </td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><a class="buttuns" onclick="Delete()">删除</a></td>
                <td></td>
            </tr>
        </table>

2.因为我们的要求是根据输入的身份证号点击查询按钮后,将查询到的数据返回到对应的框中,现在我们来写查询按钮的点击事件(οnclick=“Search()”)

function Search() {
        //如果id="se_indentity"这个控件的值等于""就弹出身份证不能为空的信息(val()表示取这个控件里的值,alert()表示弹框)
        if ($("#se_indentity").val() == "") {
            alert("身份证不能为空");
        }
        //如果框内有值,则进行下列语句
        else {
            //将框内的值赋给_indentity这个变量
            var _indentity = $("#se_indentity").val();
            $.ajax({
                type: 'POST',
                url: "Handler.ashx",         //发送请求的地址
                data: {
                    type: "search",         //类型,用于在一般处理器中判断使用哪个方法
                    indentity: _indentity   //发送到服务器的数据
                },
                //请求成功后的回调函数
                success: function (result) {
                    var json = JSON.parse(result); //解析传过来的result,将数据转化为Js对象
                    //下面三个if表示不同状态(自己设置)对应的操作
                    //这里的Status和Msg都是一般处理程序传过来的数据,在一般处理程序中会看到关于它们的申明
                    if (json.Status == -1) {      
                        alert(json.Msg);
                    }
                    if (json.Status == 0) {
                        alert(json.Msg);
                    }
                    if (json.Status == 1) {
                        //这里表示将json里的值赋到对应的框中,注意:(对于我现在的程序来说,Data(也是在一般处理程序中定义)用于接收调用方法后返回的值(类型是object),IndentityNum是这个实体里的属性,对应数据库里的字段)
                        $("#se_indentity").val(json.Data.IndentityNum);
                        $("#res_name").val(json.Data.Name);
                        $("#res_indentity").val(json.Data.IndentityNum);
                        var radiovalue = json.Data.Gender;
                        if (radiovalue == "男") {
                            $("input[name='sex'][value=男]").attr("checked", true);
                        }
                        else {
                            $("input[name='sex'][value=女]").attr("checked", true);
                        }
                    }
                }
            })
        }
    }

3.我们现在先来看删除按钮对应的事件(οnclick=“Delete()”)

 function Delete() {
        var _indentity = $("#se_indentity").val();
        $.ajax({
            type: 'POST',
            url: "Handler.ashx",
            data: {
                //注意这里的type
                type: "delete",
                //因为我是根据身份证号来删除数据,所以这里传入身份证号
                indentity: _indentity
            },
            success: function (result) {
                var json = JSON.parse(result);
                if (json.Status == 0) {
                    alert(json.Msg);
                }
                if (json.Status == 1) {
                    alert(json.Msg);
                }
            }
        })
    }

4.现在我们来看一般处理程序里面的内容,注意以下内容都是包含在 public class Handler : IHttpHandle{}内部的 Handler是你自己对处理器命的名,为了讲解方便我把里面的内容拆开了。
(1)我们首先来看对于前端ajax里data{ type: “search”}和data{ type: “delete”}里的type是怎么处理的,怎么做到选择不同的方法。

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            var type = context.Request["type"];  //用来接收传入的data里的type值(不清楚data是什么,看一看前端的function())
            //如果type == "search",则调用Search()方法,若等于delete就调用Delete方法,这样就做到了不同的type执行不一样的方法。
            if (type == "search")                
            {
                Search(context);
            }
            if (type == "delete")
            {
                Delete(context);
            }
        }

(2)我们先来看看一般处理程序中经常会用到的一个类(用来存储需要返回的数据,注意在Search()和Delete()方法中它是怎么使用的)

        //这里我们没用到Deg哦不用管它
        public class ResultModel
        {
            public int Status { get; set; }    //执行状态
            public string Msg { get; set; }    //各状态对应的提示信息
            public object Data { get; set; }   //返回的数据
            public string Deg { get; set; }    //执行不成功时的错误信息(通常是存储catch抓住的异常)
        }

(3)现在我们来看看Search()方法。

        public void Search(HttpContext context)
        {
            BAL.TestBal bal = new TestBal();                           //这是我的业务逻辑层,这里开始相当于准备把数据传入后端,不太理解可以百度一下三层架构里每一层的作用
            ResultModel remodel = new ResultModel();                   //这个ResultModel是我们通常会建立的一个类,用来存储需要反馈的各种数据
            var indentity = HttpContext.Current.Request["indentity"];  //这里是取data里indentity的值(不清楚data是什么,看一看前端的function())
            if (indentity == null)
            {
                remodel.Status = -1;
                remodel.Msg = "请输入身份证号";
            }
            else
            {
                TestModel searchreslut = bal.Search(indentity);           //存储返回的值,因为我Bal层的Search方法返回的是一个TestModel类型,所以这里设置同类型来接收
                if (searchreslut == null)                                 //这个searchresult == null 表示没有查询到任何值,即这个身份证号不存在在数据库中
                {
                    remodel.Status = 0;                                   //设置对应的状态(Status)和状态对应的返回信息(Msg)这里可以结合前端function()里的success一起看,就知道是怎么对应的啦
                    remodel.Msg = "未查询到数据";
                }
                else
                {
                    remodel.Status = 1;
                    remodel.Data = searchreslut;                          //这里将查到的searchresult放到我们的Data(ResultModel的一个属性)中
                }
           }
                var result = Newtonsoft.Json.JsonConvert.SerializeObject(remodel);  //序列化
                context.Response.Write(result);                                     //返回result
       }

(4)现在来看看Delete()

public void Delete(HttpContext context)
        {
            TestBal bal = new TestBal();
            ResultModel remodel = new ResultModel();
            var indentity = context.Request["indentity"];
            bool result = bal.Delete(indentity);                    //注意TestBal是自己写的类。TestBal里的Delete()方法返回的是bool类型所以这里用bool接收其返回值
            if (result)
            {
                remodel.Status = 1;
                remodel.Msg = "删除成功";
            }
            else
            {
                remodel.Status = 0;
                remodel.Msg = "删除失败";
            }
            var la_result = Newtonsoft.Json.JsonConvert.SerializeObject(remodel);
            context.Response.Write(la_result);
        }

注:注意用自己的业务逻辑层里的方法来替换掉我这里的哦。并且注意用于接收返回值的类型要与方法里的返回类型对应哦。
5.现在来看看效果吧
(1)输入身份证号,点击查询
asp.net中ajax和一般处理程序(handler.ashx)的交互
(2)点击删除后,再次进行输入该身份证号进行查询
asp.net中ajax和一般处理程序(handler.ashx)的交互

本文地址:https://blog.csdn.net/qq_40422692/article/details/107509382

相关标签: asp.net ajax