当前位置： 移动技术网 > IT编程>开发语言>JavaScript > asp.net中ajax和一般处理程序（handler.ashx）的交互

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

2020年07月23日  | 移动技术网IT编程  | 我要评论

（记得引入js哦）
我们假设这样一个场景，现在有一个删除界面。我们需要根据身份证来查询数据，并且将这个人的信息显示到对应的信息框中，点击删除按钮对该人的信息进行删除。这里就涉及到如何将输入的身份证信息传递到后端。并且将后端查询到的内容反馈给前端显示出来。现在我们就来实现这个过程。
1.首先我们先做一个较为简单的页面，下面是我的页面以及对应的代码（button控件有点问题，所以使用了带样式的a标签来代替它）
在这里插入图片描述
对应代码：（如果你复制了这段代码，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）输入身份证号，点击查询
在这里插入图片描述
（2）点击删除后，再次进行输入该身份证号进行查询
在这里插入图片描述

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网