使用 jquery 和控制器的 ajax 调用获取 JSON 对象以查看答案

【问题标题】：get JSON object using jquery with ajax call from controller to view使用 jquery 和控制器的 ajax 调用获取 JSON 对象以查看
【发布时间】：2019-07-03 16:41:23
【问题描述】：

我已经尝试了几个小时来找出如何取回 JSON 对象的解决方案：

这是我的功能以及我尝试过的所有内容：

$(document).ready(function () {
    $(".nav-link").click(function () {
        var chairChosen = $(this).attr("data-id");
        var perfDateId = $("#perfDate").attr("id");
        var totalCost = $("#totalMoney").html();
        window.alert(perfDateId);
        $.ajax({
            url: '/Booking/ReserveSeat1/?id=' + chairChosen + '&perfDateId=' + perfDateId,
            type: 'GET',
            dataType: 'json',
            success: function (data1) {

                $("#test").append(typeof data1);
                $("#test").append(" notConverted" + data1.Number);
                $("#test").append(" notConverted" + data1["Number"]);
                var result1 = jQuery.parseJSON(data1);
                $("#test").append("Converted jquery" + result1.Number);
                $("#test").append("Converted jquery" + result1["Number"]);
                var result2 = JSON.stringify(data1);
                var object1 = data1;
                $("#test").append("get object " + object1.Number)
                $("#test").append("Converted parse" + result2.Number);
                $("#test").append("Converted parse" + result2["Number"]);
            },
            error: function (error) {
                $(that).remove();
                DisplayError(error.statusText);
            }
        });

    });

});

我想提一下数据我不想发送 JSON 数据，我只希望收到它。

以下代码在我的控制器中：

[HttpGet]
    public ActionResult ReserveSeat1(int id, int perfDateId)
    {

        BookSeatResult bookSeat = new BookSeatResult()
        {
            Number = 10,
            Result = "a string"
        };

        return Json(bookSeat);
    }

还尝试从控制器返回 JSON 响应。

这是一个在 asp.net core 中的 mvc web 应用程序。

别忘了提到，当我调用时，控制器会响应，它确实返回一个对象类型

【问题讨论】：

正如我提到的，我正在使用 asp.net core（我应该说的是 2.2 版），并且 JsonRequestBehavior 在 ASP.NET Core 1.0 中已被弃用，如果我尝试使用它，它会说它没有存在于当前上下文中
你遇到什么错误
@mdln97 您应该可以使用POST 方法检索JSON 数据。
当前上下文中不存在JsonRequestBehavior，即报错；并且没有办法让 Json 获取两个对象
尝试将其返回为 OkObjectResult ----> return Ok(Json(Enumerable.Range(0, t + id).ToArray()));

标签： jquery asp.net .net asp.net-core asp.net-ajax

【解决方案1】：

对于 Json 对象，它是区分大小写的，这意味着 data1.Number 和 data1.number 是不同的。

对于 Asp.Net Core 序列化，它的默认序列化器是 camelCase，这意味着，return Json(bookSeat); 将返回一个 json 字符串，如下所示：

{"number":10,"result":"a string"}

对于这个字符串，如果你需要访问number和result，你需要使用number而不是Number。

试试

$("#test").append(data1.number);
$("#test").append(data1.result);

如果你想使用data1.Number，你需要在Startup.cs中将asp.net核心改成返回PascalCase，配置如下

services.AddMvc()
.AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver())
.SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

【讨论】：

这应该是公认的答案——谁会知道呢？我花了一个小时尝试调试它，并通过两种不同的方法将 JSON 返回到浏览器，包括使用 JsonResult 和 JObject 序列化。多么痛苦！

【解决方案2】：

感谢您的参与，在花了一些时间听取您的建议后，我设法找到了解决方法：

newObj.Add(bookSeat.Number.ToString());
        newObj.Add(bookSeat.Result);

        return Json(newObj.ToArray());

我现在返回一个数组，并按如下方式访问它：

  $("#test").append(data1[1]);

另外，我分析了接收回来的数据，所以我做了以下事情：

$("#test").append(data1["result"]);

现在我得到了预期的字符串

【讨论】：

【解决方案3】：

$(document).ready(function () {
   $(".nav-link").click(function () {
    var chairChosen = $(this).attr("data-id");
    var perfDateId = $("#perfDate").attr("id");
    var totalCost = $("#totalMoney").html();
    window.alert(perfDateId);
    $.ajax({
        url: '/Booking/ReserveSeat1/?id=' + 
   chairChosen + '&perfDateId=' + perfDateId,
        type: 'GET',
        dataType: 'json',
        success: function (data1) {

            $("#test").append(typeof data1);
            $("#test").append(" notConverted" + 
   data1[0]["Number"]);
            $("#test").append(" notConverted" + 
  data1[0]["Number"]);
            var result1 = jQuery.parseJSON(data1);
            $("#test").append("Converted jquery" + 
 result1[0]["Number"];
            $("#test").append("Converted jquery" + 
result1[0]["Number"]);
            var result2 = JSON.stringify(data1);
            var object1 = data1;
            $("#test").append("get object " + 
object1[0]["Number"])
            $("#test").append("Converted parse" + 
 result2[0].["Number"]);
            $("#test").append("Converted parse" + 
 result2[0]["Number"]);
        },
        error: function (error) {
            $(that).remove();
            DisplayError(error.statusText);
        }
    });

});

data1[0]["Number"],result1[0]["Number"] 中的 0 是 Key。指示数组中的行索引。我还添加了 booSeat 并返回为 JSON 序列化数组，如下所示。

[HttpGet]
   public ActionResult ReserveSeat1(int id, int 
 perfDateId)
{

    BookSeatResult bookSeat = new BookSeatResult()
    {
        Number = 10,
        Result = "a string"
    };
 List<BookSeatResult> bookSeatList = new 
 List<BookSeatResult>();
    bookSeatList.Add(bookSeat);
    return 
    Json(JsonConvert.SerializeObject(bookSeatList
    .ToArray()));
}

在 ajax 函数中检索 json 数据中的项目的模式是：

  $.ajax({
       ....
    success: function (data1) {
     var item1 = data1[0]["Attribute1"];
    }

【讨论】：

对于 ASP.NET Core 应用程序

【解决方案4】：

要么从方法中去掉HttpGet属性，要么改成HttpPost，然后做AJAXPOST：

$.ajax({
  url: '/Booking/ReserveSeat1/?id=' + chairChosen + '&perfDateId=' + perfDateId,
  type: 'POST',
  dataType: 'json',
  success: function (data1) {

  }

//...

【讨论】：

尝试将其返回为 OkObjectResult ----> return Ok(Json(Enumerable.Range(0, t + id).ToArray()));