從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

沒必要用 「dataType: 'json'」

因爲你已經發送Json數據。所以它已經被解析了。

Json數據以鍵值對發送。而你並沒有以這種方式訪問​​。

您沒有使用「結果」參數在代碼中的任何位置。

結果是數組。並訪問鍵/索引這種方式在我的情況下「status_code」是objec /變量我想訪問它的值..

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; 
     }, 

Answer 2

我改變了一些你的代碼，所以這可能是工作。 您的解決方案是艱難的方法，這是簡單而簡單的方法。 而不是使用字符串數組作爲返回對象使用對象！

首先創建一個視圖模型類的操作方法返回物品的對象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對象val只需通過密鑰的名稱即可。我改變了使用更多JQuery函數的代碼。我使用$.getJSON而不是$ .post，因此接收的數據是Json格式。

Answer 3

嘗試

• 明確jQuery.ajax()
• 通JSON字符串設定Content Type使用JSON.stringify Function

例子：

$.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.. 
     } 
    });