Ajax.BeginForm，调用操作，返回 JSON，如何在 OnSuccess JS 函数中访问 JSON 对象

Ajax

使用Ajax.BeginForm调用操作并返回JSON对象后，在OnSuccess JS函数中访问JSON对象是非常常见的需求。通过以下文章，我们将详细介绍如何实现这一功能，并提供一个案例代码来帮助读者更好地理解。

使用Ajax.BeginForm调用操作并访问返回的JSON对象

在前端开发中，我们经常需要使用Ajax来发送异步请求，并在请求成功后处理返回的数据。而ASP.NET MVC提供的Ajax.BeginForm方法可以方便地实现这一功能。但是，当我们的操作返回的是一个JSON对象时，如何在OnSuccess JS函数中访问这个JSON对象呢？接下来，我们将详细解答这个问题。

案例代码：

让我们假设我们有一个简单的表单，其中包含一个文本框和一个提交按钮。当用户提交表单时，我们将通过Ajax.BeginForm方法调用一个操作，并返回一个包含用户输入的JSON对象。接下来，我们将使用OnSuccess JS函数访问这个JSON对象，并在页面上显示其中的数据。

html
@using (Ajax.BeginForm("ActionName", "ControllerName", null, new AjaxOptions { OnSuccess = "handleSuccess" }, new { id = "myForm" }))
{
    <input type="text" name="data" id="data" />
    <input type="submit" value="Submit" />
}
<script>
    function handleSuccess(data) {
        var JSonData = JSON.parse(data.responseText);
        // 访问JSON对象的属性
        var inputValue = JSonData.input;
        var outputValue = JSonData.output;
        // 在页面上显示数据
        document.getElementById("result").innerHTML = "输入值：" + inputValue + "<br/>输出值：" + outputValue;
    }
</script>
<div id="result"></div>

在上述案例代码中，我们首先使用Ajax.BeginForm方法创建了一个表单，其中指定了操作的名称和控制器的名称。我们还指定了一个OnSuccess JS函数handleSuccess作为成功时的回调函数。这个函数将在操作成功返回JSON对象后被调用。

在handleSuccess函数中，我们首先使用JSON.parse方法将返回的JSON数据解析为一个JavaScript对象。然后，我们可以通过访问这个对象的属性来获取其中的数据。在这个例子中，我们假设JSON对象具有"input"和"output"两个属性，分别表示用户输入和操作的输出。

最后，我们将获取到的数据显示在页面上，通过document.getElementById方法获取到一个用于显示结果的div元素，并将结果设置为其innerHTML。

通过使用Ajax.BeginForm方法调用操作并返回JSON对象后，在OnSuccess JS函数中访问JSON对象是非常简单的。我们只需要解析返回的JSON数据，并通过访问JavaScript对象的属性来获取其中的数据。希望本篇文章能够帮助你理解如何在OnSuccess JS函数中访问返回的JSON对象，并在页面上显示其中的数据。