当前位置: 首页 > 工具软件 > Response JS > 使用案例 >

JS处理服务端Response回来的数组

宋涵衍
2023-12-01

最近在做一个项目时,需要在服务器端response回来一个结果数组,然后在客户端的浏览器通过JS处理。

GetResult.ashx.cs:

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

namespace ResponseDemo
{
    /// <summary>
    /// GetResult 的摘要说明
    /// </summary>
    public class GetResult : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            string[] result = new string[] { };
            bool ok = true;
            //do something
            //.....

            if (ok)
            {
                result = new string[] { "success", "true", "url", "http://localhost:80/" };
            }
            else
            {
                result = new string[] { "error","false"};
            }
            context.Response.Write(result);
        }

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

客户端是通过XmlHttpRequest来进行通信的。通信后,需要处理得到的结果信息。

<!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>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        }
        else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr.onreadystatechange = show;
        xhr.open("GET", "GetResult.ashx", true);
        xhr.send(null);

        function show() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var response= "";
                    try {
                         response = eval("(" + xhr.responseText + ")");
                     } catch (e) {
                     alert("error");
                    }
                    
                    document.write("xhr.responseText: "+ xhr.responseText + "<br/>eval response: "+ response);
                }
            }
        }
    </script>
</body>
</html>

很明显,上面这样是会catch到错误信息的,输出的也是:

xhr.responseText: System.String[]
eval response:


eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码,在其中再加对括号,是为了把里面需要处理的字符串当作一个整体,避免与上下文造成解析错误。

看到一些朋友说,可以把需要response的信息转换成字符串,并用特殊符号分隔,用JS处理时再Split。这无疑也是一个办法,但总觉得不是很方便。

然后,弄了个折中的办法:在Server端,先把数组解析了。

 //context.Response.Write(result);
            string resultString = "[";
            for (int i = 0; i < result.Length; i++)
            {
                resultString += "'" + result[i].ToString() + "',";   
            }
            resultString = resultString.TrimEnd(',') + "]";
            context.Response.Write(resultString);

JS端的代码不用改变,就可以成功取得response回来的数组了。

 

 if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var response= "";
                    try {
                         response = eval("(" + xhr.responseText + ")");
                     } catch (e) {
                     alert("error");
                    }
                    
                    document.write("xhr.responseText: "+ xhr.responseText + "<br/>eval response: "+ response);
                }
            }

输出结果:

xhr.responseText: ['success','true','url','http://localhost:80/']
eval response: success,true,url,http://localhost:80/

上面中,也可以通过response[i]访问。

 

 

 

这样简单的使用,之前没掌握技巧,也花费不少时间。Mark it。

 

 类似资料: