AJAX 将对象数组发布到端点答案

【问题标题】：AJAX Post array of objects to endpointAJAX 将对象数组发布到端点
【发布时间】：2017-10-21 17:57:09
【问题描述】：

我正在尝试将一组对象发布到 API 端点 (onClick)，但我不断收到 400 Bad Request 错误。

我不完全确定我在这里做错了什么，希望在这个问题上得到一些帮助。

我的代码如下：

$('#test-post').on('click', function() {

          var postData = [
            {
              "artist": "Artist Name",
              "title": "Artist Title",
              "genre": "string",
              "duration": "2:05",
              "url": "Artist url",
            },
            {
              "artist": "Artist Name",
              "title": "Artist Title",
              "genre": "string",
              "duration": "2:05",
              "url": "Artist url",
            }
          ];

          $.ajax({
            url: 'http://localhost:8000/api/endpoint',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(postData),
            success: function(data) {
              console.log('Data has been posted');
              console.log(data);
            },
            error: function(err) {
              console.log(err.statusText);
            }
          });
        });

任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： jquery arrays ajax object post

【解决方案1】：

这是工作代码。似乎缺少 JQuery。

$('#test-post').on('click', function() {

          var postData = [
            {
              "artist": "Artist Name",
              "title": "Artist Title",
              "genre": "string",
              "duration": "2:05",
              "url": "Artist url",
            },
            {
              "artist": "Artist Name",
              "title": "Artist Title",
              "genre": "string",
              "duration": "2:05",
              "url": "Artist url",
            }
          ];

          $.ajax({
            url: 'http://localhost:8000/api/endpoint',
            type: 'POST',
            dataType: 'json',
            data: {'params': JSON.stringify(postData)},
            success: function(data) {
              console.log('Data has been posted');
              console.log(data);
            },
            error: function(err) {
              console.log("Error is: " + err.statusText);
            }
          });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test-post">Click me</div>

端点 URL 有这个简单的代码。这有效。 <?php echo $_POST['params']; ?>

【讨论】：

我在我的 site.js 文件之前的页脚中放置了 jQuery。我认为这不是问题。 @milan-chheda
如果 JQuery 正在加载，您能否在控制台中检查。另外，请分享 HTML 代码以更好地理解问题。你可以试试我上面的代码，它不会抛出 400 bad request。
我检查并加载了 jQuery。 html 代码仅包含 id 为test-post 的按钮。如果我运行你的 sn-p 会给出以下错误：Error is: error
是的，Error is: error 写在错误回调中。你能验证请求的 URL 是否被命中并且返回 JSON 吗？
是的，它确实返回 JSON。我尝试发布像 var postData = { "artist": "Artist Name", "title": "Artist Title", "genre": "string", "duration": "2:05", "url": "Artist url", } 这样的单个对象，这似乎发布成功

【解决方案2】：

如果您使用的是 ASP .Net MVC 请检查您是否使用了正确的过滤器，默认情况下将 [HttpPost] 用于 POST 请求，它会将其视为 Get 请求

[HttpPost]
public JsonResult endpoint()

【讨论】：

我没有使用 ASP .Net。只是使用 jQuery AJAX 做一个帖子