Question

从ASP.NET MVC控制器中，从视图执行JQuery请求后，我收到以下形式的JSON对象：

[
  {
    "detectedLanguage": {
      "language": "de",
      "score": 1.0
    },
    "translations": [
      {
        "text": "This is a test.",
        "to": "en"
      }
    ]
  }
]

在视图方面，我想解析“文本”属性以更新DIV内容。

此刻，我正努力从JSON对象/数组中获取元素：

function doTranslation() {
    const textBody = document.getElementById("TextSource").value;

    var textData = { LanguageFrom: "", LanguageTo: "", TextSource: textBody, TextResult: "" };
    var requestData = JSON.stringify(textData);

    $.ajax({
        url: "/Translations/Translate",
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: requestData,
        success: function (data) {
            document.getElementById("PreviewText").innerHTML = data[0].translations[0].text;
        },
        error: function () {
            document.getElementById("PreviewText").innerHTML = "Error";
        }
    });
}

$("#spinButton").on('click', doTranslation);

感谢您的帮助，谢谢！

这是我想在同一视图中使用JS代码更新的div：

            <!-- Preview Tab-->
            <div role="tabpanel" class="tab-pane" id="preview">
                <div><a class="btn btn-success float-right" style="color:white;" id="spinButton"><i class="fas fa-sync"></i> &nbsp; Translate</a></div><br />
                <div id="PreviewText">Press the <strong>Translate</strong> Button to Translate your text Source...</div>               
            </div>
        </div>
    </div>
</div>

@section Scripts {    
    <script src="~/js/translate.js"></script>

如果我在

之类的JavaScript代码中进行了硬编码

document.getElementById("PreviewText").innerHTML = "Hard coded text";

将显示文本。

这是Chrome的调试输出：

而且错误是div未使用“文本”内容更新。

控制台错误是：

translate.js:18 Uncaught TypeError: Cannot read property '0' of undefined
    at Object.success (translate.js:18)
    at fire (jquery.js:3268)
    at Object.fireWith [as resolveWith] (jquery.js:3398)
    at done (jquery.js:9305)
    at XMLHttpRequest.<anonymous> (jquery.js:9548)

当我用鼠标悬停时，“数据”显示的是完整结果。将鼠标悬停在“翻译”或“文字”上不会显示任何内容。

也许这可以清除它。

Answer 1

似乎尚未解析JSON，data是字符串而不是JS对象。

通常，您应该在AJAX参数中指定dataType: "json"，但似乎不起作用（服务器首先序列化JSON）。

查看服务器实际返回的内容，或在成功函数中添加data = JSON.parse(data)。

JavaScript：从JSON数组获取元素

1 个答案: