解决ASP.NET中ashx文件无法接收前端axios传递的数据的方法

最新推荐文章于 2024-02-16 07:00:00 发布

HerryDong

最新推荐文章于 2024-02-16 07:00:00 发布

阅读量1.7k

点赞数 1

分类专栏： ASP.NET 文章标签： ASP.NET ashx axios

本文链接：https://blog.csdn.net/HerryDong/article/details/102580932

版权

ASP.NET 专栏收录该内容

16 篇文章 8 订阅

订阅专栏

踩了一个早上的坑，算是搞定axios的传值问题了。假设我们现在需要传递一个数值到后台，后台可以计算该数的平方，最后把计算后的平方值返回前端界面。对于该问题，我们先来看一下jQuery Ajax是怎么解决的：
html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>jQuery Ajax后台传值</title>
    <script src="Scripts/jquery-3.4.1.min.js"></script>
</head>
<body>
    <input id="num" type="text" />
    <span>的平方为：</span>
    <input id="pow" type="text" />
    <input id="cal" type="button" value="计算" onclick="calculate()" />

    <script>
        function calculate() {
            $.ajax({
                url: 'ashx/TestHandler.ashx',
                type: 'post',
                data: {
                    num: $('#num').val()
                },
                dataType: 'json',
                success: function (data) {
                    $('#pow').val(data);
                }
            })
        }
    </script>
</body>
</html>

ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;

namespace WebApplication2.ashx
{
    /// <summary>
    /// TestHandler 的摘要说明
    /// </summary>
    public class TestHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            double num = double.Parse(context.Request["num"].ToString());
            double pow = num * num;

            context.Response.Write(JsonConvert.SerializeObject(pow));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

对于经常使用jQuery的同志来说，理解这段代码应该很简单。运行结果如下：
在这里插入图片描述
那么如果利用axios传值，是否也是这么简单呢？一开始我也是这么想的，直接就照葫芦画瓢，代码如下：
html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>axios后台传值</title>
    <script src="Scripts/vue.min.js"></script>
    <script src="Scripts/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <input id="num" type="text" v-model="num" />
        <span>的平方为：</span>
        <input id="pow" type="text" v-model="pow" />
        <input id="cal" type="button" value="计算" @click="calculate" />
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                num: '',
                pow: ''
            },
            methods: {
                calculate: function () {
                    axios
                        .post('ashx/TestHandler.ashx', {
                            num: this.num
                        })
                        .then(response => {
                            this.pow = response.data;
                        })
                        .catch(response => {
                            alert('error');
                        })
                }
            }
        })
    </script>
</body>
</html>

ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;

namespace WebApplication2.ashx
{
    /// <summary>
    /// TestHandler 的摘要说明
    /// </summary>
    public class TestHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            double num = double.Parse(context.Request["num"].ToString());
            double pow = num * num;

            context.Response.Write(JsonConvert.SerializeObject(pow));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

结果问题来了，前端界面怎么都获取不到计算后的结果。一开始我以为得改成context.Request.QueryString之类的方法，结果都试了一遍，全部不行。。。。。。最后想了很久，我突然想到了一个问题，那就是axios传递给ashx的到底是什么内容？结果一试就发现问题了，如果用jQuery Ajax，它传递给后台的结果是：

num=22

而如果用axios，它传递给后台的结果是：

{"num":"22"}

很明显，如果利用axios，后台接收到的是一个json对象，所以ashx无法接受到参数。搞明白了这一点，接下来就很简单了，只要把ashx接收参数的方式改一改就行了，代码如下：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

namespace WebApplication1.ashx
{
    /// <summary>
    /// TestHandler 的摘要说明
    /// </summary>
    public class TestHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            string json = string.Empty;
            using (StreamReader reader = new StreamReader(context.Request.InputStream))
            {
                json = reader.ReadToEnd();
            }

            JObject jObject = JsonConvert.DeserializeObject(json) as JObject;
            double num = double.Parse(jObject["num"].ToString());
            context.Response.Write((num * num).ToString());
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

最后运行结果正常，如下图所示：
在这里插入图片描述

HerryDong

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
解决ASP.NET中ashx文件无法接收前端axios传递的数据的方法

踩了一个早上的坑，算是搞定axios的传值问题了。假设我们现在需要传递一个数值到后台，后台可以计算该数的平方，最后把计算后的平方值返回前端界面。对于该问题，我们先来看一下jQuery Ajax是怎么解决的：html<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" cont...
复制链接

扫一扫

专栏目录