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

时间:2019-02-09 18:31:22

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

我已经尝试了几个小时,以找出如何找回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核心中的mvc网络应用。

别忘了提到当我执行呼叫时,控制器会做出响应,并且确实会返回对象类型

4 个答案:

答案 0 :(得分:1)

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

对于Asp.Net Core序列化,其默认序列化器为camelCase,这意味着return Json(bookSeat);将返回如下的json字符串:

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

对于此字符串,如果您需要访问numberresult,则需要使用number而不是Number

尝试

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

如果要使用data1.Number,则需要更改asp.net核心以返回PascalCase,其配置如下Startup.cs

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

答案 1 :(得分:0)

从方法中删除HttpGet属性或将其更改为HttpPost,然后执行AJAX POST

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

  }

//...

答案 2 :(得分:0)

感谢您的参与,在花了一些时间提出建议之后,我设法找到了解决方法:

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

        return Json(newObj.ToArray());

我现在要返回一个数组,并且可以按如下方式访问它:

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

我还分析了接收回的数据,所以我做了以下事情:

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

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

答案 3 :(得分:0)

$(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”]中的0,结果1 [0] [“ Number”]是键。 指示数组中的行索引。 我还添加了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"];
    }