从 JsonResult 返回一个字符串数组并在 JavaScript 中使用它

Question

我正在尝试查询数据库，并在我的网页中获取结果，但是它必须通过 JavaScript（Ajax、jQuery）来完成。我已经用谷歌搜索了几个小时，但没有任何效果。它要么抛出一个解析器错误，说SyntaxError: Unexpected end of input，要么只是以未定义的形式出现。

我正在使用以下 JsonResult 方法：

[AcceptVerbs(HttpVerbs.Post | HttpVerbs.Get)]
public JsonResult NextArticle(int slideID)
{
    var articles = db.Slides.ToList();
    var currentArticle = db.Slides.First(s => s.SlideId == slideID);
    int articlePosition = articles.IndexOf(currentArticle);
    articlePosition = (articlePosition + 1) >= articles.Count() ? 0 : articlePosition + 1;

    var nextArticle = articles.ElementAt(articlePosition);

    //nextArticle.Article.ArticleText.Substring(0, 50)+"..."
    string[] returnParameters = { 
                                    nextArticle.SlideId.ToString(),
                                    nextArticle.Image.ImageURL,
                                    nextArticle.Article.ArticleTitle,
                                    nextArticle.Article.ArticleText
                                };
    return Json(returnParameters);
}

还有以下 JavaScript 函数：

function nextSlide() {
    var articleLink = document.getElementsByTagName("a")[0];
    $.ajax({
        type: 'POST',
        url: "../SlideShow/NextArticle",
        data: {
            slideID: articleLink.getAttribute("id"),
        },
        dataType: 'json', //Some places are saying I should leave this out
        success: function (result) {
            $(articleLink).id = result[0];
            document.getElementById("articleImage").setAttribute("src", result[1]);
            document.getElementById("articleTitle").innerHTML = result[2];
            document.getElementById("articleText").innerHTML = result[3];
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Status: " + textStatus); alert("Error: " + errorThrown);
        }
    });
}

Answer 1

尝试

• 在jQuery.ajax() 中显式设置Content Type
• 使用JSON.stringify Function传递JSON字符串

例子：

 $.ajax({
        type: 'POST',
        url: "../SlideShow/NextArticle",
        data: JSON.stringify({'slideID': articleLink.getAttribute("id")}), 
        contentType: "application/json",
        success: function (result) {
           //process result here..
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
           //process error here..
        }
    });

Answer 2

我更改了一些您的代码，所以这可能有效。 您的解决方案是困难的方法，这是简单易行的方法。 而不是使用字符串数组作为返回的对象使用对象！

首先创建一个视图模型类，用于在action方法中将文章对象作为Json结果返回：

    public class ArticleViewModel
    {
        public int SlideID { get; set; }
        public String ImageURL { get; set; }
        public String ArticleTitle { get; set; }
        public String ArticleText { get; set; }
    }

那么您的 JsonResult 方法将是：

    [HttpGet]
    public JsonResult NextArticle(int slideID)
    {
        var articles = db.Slides.ToList();
        var currentArticle = db.Slides.First(s => s.SlideId == slideID);
        int articlePosition = articles.IndexOf(currentArticle);
        int nextArticlePosition = articlePosition > articles.Count() ? 0 : articlePosition + 1;

        var nextArticle = articles.ElementAt(nextArticlePosition);

        //nextArticle.Article.ArticleText.Substring(0, 50)+"..."

        var result = new ArticleViewModel()
        {
            SlideID = nextArticle.SlideId,
            ImageURL = nextArticle.Image.ImageURL,
            ArticleTitle = nextArticle.Article.ArticleTitle,
            ArticleText = nextArticle.Article.ArticleText,

        };
        return Json(result, JsonRequestBehavior.AllowGet);
    }

处理响应的Javascript函数是：

    function nextSlide() {
    var articleLink = document.getElementsByTagName('a')[0];

    $.getJSON('../SlideShow/NextArticle',
                { slideID: articleLink.getAttribute("id") },
                function (receivedData) {
                    $(articleLink).id = receivedData.SlideID;
                    $('#articleImage').attr('src', receivedData.ImageURL);
                    $('#articleTitle').html(receivedData.ArticleTitle);
                    $('#articleText').html(receivedData.ArticleText);
                })
    .fail(function (XMLHttpRequest, textStatus, errorThrown) {
        alert("Status: " + textStatus); alert("Error: " + errorThrown);
    })
    ;

}

您可以通过键名简单地访问返回的 Json 对象值。我更改了使用更多 JQuery 函数的代码。我使用 $.getJSON 而不是 $.post 所以接收到的数据是 Json 格式。

Answer 3

无需使用“dataType: 'json'”

因为您已经在发送 Json 数据。所以它已经被解析了。

Json 数据以键值对的形式发送。而你不是通过这种方式访问​​的。

您没有在代码中的任何位置使用 "result" 参数。

结果是数组。并以这种方式访问​​键/索引在我的情况下“status_code”是对象/变量我想访问它的值..

result.status_code == 200;

success: function (result) {
            result.status_code == 200;
            $(articleLink).id = result.arrayKey_1;
            document.getElementById("articleImage").setAttribute("src", result.arrayKey_1);
            document.getElementById("articleTitle").innerHTML = result.arrayKey_2;
            document.getElementById("articleText").innerHTML = result.arrayKey_3;
        },