AJAX 将对象数组发布到端点

Posted 2023-05-09

【中文标题】AJAX 将对象数组发布到端点

【英文标题】：AJAX Post array of objects to endpoint

【发布时间】：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);
            
          );
        );

任何帮助将不胜感激。

谢谢

【参考方案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 做一个帖子