getJSON 未读取 JSON 数组
Posted
技术标签:
【中文标题】getJSON 未读取 JSON 数组【英文标题】：JSON array not being read by getJSON 【发布时间】：2019-10-16 18:20:47 【问题描述】：我正在尝试传递一个 JSON 整数数组，但 getJSON 没有读取它。 （当我使用https://jsonplaceholder.typicode.com/users 此处找到的虚拟 JSON 数组时，它读起来很好）
由于我的 api 在另一个项目中，因此尝试根据此处 (Changing getJSON to JSONP) 的建议添加 &callback=? 来处理 CORS。
遇到的问题：
-
回调不适用于 getJSON（即显示 html 表格但仍未填充。）
加载资源失败：服务器响应状态为404()
-
引发了以下错误，但我不确定它们是否相关。
jquery.dataTables.min.css.: Uncaught SyntaxError: Unexpected token
JSON 数组接口
// GET api/dbretrieve
[HttpGet]
public ActionResult<IEnumerable<string>> Get()
//TEST
HashSet<int> db = new HashSet<int>() 2, 3, 5, 7, 11, 13 ;
string json_string = "";
json_string = json_string + '[';
foreach (int s in db)
json_string = json_string + "pid:" + s + ",";
if(Data.db.Count>0) json_string = json_string.Substring(0, json_string.Length - 1);
json_string = json_string + ']';
var json = JsonConvert.DeserializeObject(json_string);
return StatusCode(200, json);
获取JSON
<script>
$(document).ready(function ()
$.getJSON("https://localhost:44399/api/dbretrieve&callback=?", function (data)
var employee_data = '';
$.each(data, function (key, value)
employee_data += '<tr>';
employee_data += '<td>' + '</td>';
employee_data += '<td>' + value.pid + '</td>';
employee_data += '</tr>';
);
$('#employee_table tbody').append(employee_data);
);
);
</script>
正在传递的 JSON 数组
["pid":2,"pid":3,"pid":5,"pid":7,"pid":11,"pid":13]
HTML
<body>
<div class="container">
<div class="table-responsive">
<h1>Testing of database table</h1>
<br />
<table class="table table-bordered table-striped"
id="employee_table">
<thead>
<tr>
<th>#</th>
<th>pid</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
HTML 标头
<head runat="server">
<title>JSON data to HTML</title>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.9.0/d3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
【问题讨论】：
我只是复制+粘贴了您的 jQuery 和数组 with no issues。你能分享一下HTML吗？ 编辑：您的$.getJSON 缺少结束标记，但您说没有错误，所以我不得不假设这只是问题中的一个错字。
@TylerRoper 嗨，是的，这是一个错字。感谢您的提醒:) 我已经编辑了我的帖子以及 HTML
你的数组 - 你 console.log(data) 得到那个了吗？你确定这就是 data 在 javascript 中所代表的吗？
@TylerRoper 是的，数据传递得很好，它（网址）与 Postman 一起使用。但是我在控制台日志中被抛出一个“请求的资源上没有'Access-Control-Allow-Origin'标头”错误
您的 API 调用存在一些问题。它可能无法为您提供所需的正确结果。
【参考方案1】：
您需要在服务器端添加 CORS 标头，有很多方法可以做到这一点，请参阅answer。
我将采用最明显的方式在您的操作方法之上装饰EnableCors 属性。
目前它将允许每个来源、标头和方法访问您的操作方法以进行测试，但在生产中将其更改为仅选定的来源、标头和方法。
现在，您可以继续将您的代码重构为这个，而不是进行字符串连接：
// GET api/dbretrieve
[HttpGet]
[EnableCors(origins: "*", headers: "*", methods: "*")]
public JsonResult Get()
HashSet<int> db = new HashSet<int>() 2, 3, 5, 7, 11, 13 ;
// Project into your desired list
var pidList = db.Select(x => new
pid = x
);
return Json(pidList, JsonRequestBehavior.AllowGet);
将您的 HTML 代码重构为：
<!DOCTYPE html>
<head>
<title>JSON data to HTML</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Latest D3.js -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- Latest jQuery Datatable CDN -->
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></script>
<script>
$(document).ready(function()
function getData(callback)
const serverUrl = "http://localhost:44399/api/dbretrieve";
$.ajax(
url: serverUrl,
type: 'GET',
dataType: 'json',
contentType: "application/json;charset=utf-8",
success: function(data)
callback(data);
,
error: function(jqXHR, textStatus, errorThrown)
console.log(textStatus);
);
function populateTable(data)
const table = $('#employee_table');
table.find("tbody tr").remove();
data.forEach(x =>
table.append("<tr><td> </td><td>" + x.pid + "</td></tr>");
);
// Get data from server now
getData(populateTable);
);
</script>
</head>
<body>
<div class="container">
<div class="table table-hover table-responsive">
<h1>Testing of database table</h1>
<br />
<table class="table table-bordered table-striped" id="employee_table">
<thead>
<tr>
<th>#</th>
<th>pid</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>【讨论】：
【参考方案2】：尝试添加“最小宽度：700px;”到桌子上。
【讨论】：
以上是关于getJSON 未读取 JSON 数组的主要内容，如果未能解决你的问题，请参考以下文章
$.getJSON 没有正确返回（[object Object]，未定义或啥都没有）