如何将JSON响应从VB传递至JS？支付场景技术问询

核心问题分析 #

你遇到的两个关键问题：

1. 隐藏input只显示{：因为JSON里的双引号没有转义，导致HTML的value属性被提前截断（比如JSON里的{"response"...会被浏览器解析为value="{"，后面的内容全部失效）。
2. JS脚本错误：JSON.parse(json)是错误写法，json是DOM元素对象，不是字符串，应该取它的value属性；另外脚本执行时机可能早于DOM加载完成，导致找不到目标元素。

修正方案 #

直接将后端获取的JSON作为JS变量注入页面，比用隐藏input更可靠，同时解决转义问题：

修正后的VB代码

Dim webClient As New WebClient()
Dim resByte As Byte()
Dim resString As String
Dim reqString() As Byte

Try
    webClient.Headers("content-type") = "application/json"
    reqString = Encoding.Default.GetBytes(JsonConvert.SerializeObject(dictData, Formatting.Indented))
    resByte = webClient.UploadData(Me.urlToPost, "post", reqString)
    resString = Encoding.Default.GetString(resByte)
    Dim p As Page = TryCast(HttpContext.Current.Handler, Page)

    ' 1. 转义JSON字符串，避免破坏JS语法
    Dim escapedJson As String = HttpUtility.JavaScriptStringEncode(resString)
    
    ' 2. 构建正确的JS脚本：直接把JSON赋值给变量，确保DOM加载完成后执行
    Dim jScript As String = <text>
<script>
// 等待DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
    var myCheckout = new bankCheckout();
    myCheckout.setMode('qa');
    myCheckout.setCheckoutDiv('bankCheckout');
    
    var form1Display = document.getElementById('form1');
    var bankCheckoutDisplay = document.getElementById('bankCheckout');
    
    function showCheckout(){
        form1Display.style.visibility = 'hidden';
        bankCheckoutDisplay.style.visibility = 'visible';
    }
    
    // 直接使用后端传递的JSON变量
    var paymentResponse = <%= escapedJson %>;
    if(paymentResponse.response.success === 'true'){
        alert(paymentResponse.response.ticket);
        myCheckout.startCheckout(paymentResponse.response.ticket);
        showCheckout();
    } else {
        alert('支付请求失败');
    }
});
</script>
</text>.Value

    ' 注册脚本，自动处理标签包裹（最后一个参数设为True）
    p.ClientScript.RegisterStartupScript(Me.GetType, "PaymentScript", jScript, False)

    webClient.Dispose()
    Return True            
Catch ex As Exception
    ' 添加异常处理，方便排查问题
    p.ClientScript.RegisterStartupScript(Me.GetType, "ErrorScript", $"alert('请求失败：{HttpUtility.JavaScriptStringEncode(ex.Message)}');", True)
    Return False
End Try

关键修改点说明

• 转义处理：用HttpUtility.JavaScriptStringEncode处理JSON字符串，确保双引号、换行等特殊字符不会破坏JS语法。
• DOM加载时机：用DOMContentLoaded事件确保脚本在所有元素加载完成后执行，避免找不到form1或bankCheckout元素的问题。
• 直接注入变量：把JSON直接作为JS对象赋值给paymentResponse，不需要通过input中转，减少出错环节。
• 异常处理：添加Catch块捕获错误，方便排查后端请求失败的问题。

替代方案（如果必须用隐藏input） #

如果一定要用隐藏input传递，必须对JSON做HTML转义：

' 转义HTML特殊字符，避免破坏input的value属性
Dim htmlEscapedJson As String = HttpUtility.HtmlEncode(resString)
System.Web.HttpContext.Current.Response.Write($"<input id=""jsonResponse"" type=""hidden"" value=""{htmlEscapedJson}"">")

然后JS里要取value再解析：

var jsonInput = document.getElementById('jsonResponse');
var obj = JSON.parse(jsonInput.value);

内容的提问来源于stack exchange，提问作者Jerjef