HTTP 415使用JQuery将JSON上传到基于Dropwizard的API时出错

Question

我使用Dropwizard编写了一个REST / JSON API。除了内部单元测试，我一直在使用Restlet Chrome扩展和curl测试它。我一直在HTTP请求中使用Content-Type：“application / json”标头。这按预期工作。

现在我一直在研究访问API的基于JavaScript的前端。我没有真正深入JavaScript，我选择了JQuery。它适用于GET请求。我在最后一天努力让POST请求正常工作。我不知道我做错了什么。非常感谢您的任何帮助！

关于API：Dropwizard资源类如下所示：

@Path("/documents")
@Produces(MediaType.APPLICATION_JSON)
@Consumes(MediaType.APPLICATION_JSON)
public class DocumentsResource { 
    //generic stuff happening in the class, including internal data handling and the add() method

    @POST
    public Response addDocument(@NotNull @Valid TCDocuments documents){
      if(documents.getDocuments().length==0){
        Response response = Response.status(400).build();
        return response;
      }
    else if(documents.getDocuments().length>0){
        for(int i=0; i<documents.getDocuments().length; i++){
            TCDocument doc=documents.getDocuments()[i];
            add(doc);
        }
     }

    Response response = Response.ok().build();
    return response;
 }
}

POJO TCDocuments包含一系列TCDocument POJO。完成的JSON（在单元测试中用作夹具）是：

{
"documents":[
    {
        "id":-1,
        "label":"My label",
        "content":"My content",
        "url":""
    }]
}

我已尝试使用JQuery向其发送多个内容。在我的HTML页面中，有一个名为“createF”的表单，我在发布到该界面时用它来输入数据。如上所述，我并不适合使用JavaScript，但是根据StackOverflow上的建议，我在JavaScript中创建了一个文档对象，然后尝试发送它：

var form = $("#createF").serializeArray();
var documents = {
    documents: [
        {
            id: form[0].value,
            label: form[1].value,
            content: form[2].value,
            url: form[3].value
        }
    ]
};
var json = JSON.stringify(documents);

使用console.log（）命令我发现，stringify将id放在引号中。我的API不接受这一点，所以我认为这是发生415错误的根源。为了解决这个问题，我使用字符串运算符将一些东西放在一起：

var json = "{ \"documents\":[{\"id\":-1,\"label\":\"metadata json\",\"content\":\"I am ignored\",\"url\":\"\"}]}";

不幸的是，当我尝试使用以下命令发送时也会导致415错误：$ .post（“../documents”，json，function（response）{console.log（resonse）;}，“json”）;

正如我在这里找到的，我不仅要将Content-Type设置为HTTP标头，还要将Accepted设置为“application / json”。 POST JSON fails with 415 Unsupported media type, Spring 3 mvc我不需要在restlet客户端或curl中指定该头。但也许JQuery的行为不同。我知道什么？所以我写了下面的代码：

var url="../documents";
$.postJSON = function(url, json){
    return jQuery.ajax({
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        'type': 'POST',
        'url': url,
        'data': json,
        'dataType': 'json',
        'success': function(){
        console.log("successfully posted something");
        }   
    });
};

好消息是，这不会产生415消息，但我根本得不到API的回复。网络日志显示，调用该函数时没有包离开浏览器。我在这里和其他方面找到的所有内容基本上都是关于如何在JQuery中使用$ .post或$ postJSON的更多信息。我尝试了http://api.jquery.com/jQuery.post/的所有示例变体，导致更多415条消息。

任何人都可以告诉我我做错了什么或者我该做什么？非常感谢你提前！

Answer 1

谢谢@Justin-Pearce的评论。使用$ .ajax（）而不是$ .post（）或$ .postJSON（）时，以下代码有效：

$("#createF").submit(function( event ) {
                event.preventDefault();
                console.log("Uploading data");
                var form = $("#createF").serializeArray();
                console.log(form);
                var json = "{ \"documents\":[{\"id\":"+form[0].value+
                    ",\"label\":\""+form[1].value+
                    "\",\"content\":\""+form[2].value+
                    "\",\"url\":\""+form[3].value+"\"}]}";
                console.log(json);

                var url="../documents";


                $.ajax({
                    url: url,
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type':'application/json'
                    },
                    method: 'POST',
                    dataType: 'json',
                    data: json,
                    success: function(data){
                        console.log('something worked');
                        console.log('succes: '+data);
                    }
                 });

            });

唯一有趣的是，即使操作成功运行，似乎也没有触发成功函数。我将API的响应代码从200更改为201（已创建）。这似乎也没有触发成功功能。否则，这会做它应该做的事情。