将带有 JSON 数据的 POST 请求从 HTML 发送到 Java Rest Web

Question

我正在尝试使用 javascript 和 ajax 将 index.html 中的 HTML 表单中的数据作为 JSON 数据发送到 Java REST Web 服务。到目前为止，我尝试了我在网上找到的任何东西，但每次我收到 HTTP 错误 415 时仍然如此。我知道该错误的含义，但无法弄清楚我错在哪里，因为我对 javascript 还不太熟悉。这是代码：索引.htmldiv style="text-align:center"><form action="http://localhost/MyTaskTest/servicea" method="post" id="test"><fieldset><legend>Add to Your balance</legend><label for="amount">Money amount</label><input type="text" name="Amount" /> <br/><label for="currency">Select currency</label><select name="Currency">    <option value="eur">EUR</option></select><input type="submit" value="Add"></fieldset></form></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script><script>(function() {function toJSONString( form ) {var obj = {};var elements = form.querySelectorAll( "input, select" );for( var i = 0; i < elements.length; ++i ) {    var element = elements[i];    var name = element.name;    var value = element.value;    if( name ) {        obj[ name ] = value;    }}return JSON.stringify( obj );}window.onload = function() {var form = document.getElementById("test");var output = document.getElementById("output");form.onsubmit = function( e ) {    e.preventDefault();    var json = toJSONString( this );            console.log(json);            console.log("TEST");    $.ajax({        url: form.getAttribute( 'action' ),        headers: {             'Accept': 'application/json',            'Content-Type': "application/json; charset=utf-8"        },        type: 'POST',        data: json,        success: function(data) {            alert("data saved")            console.log("SUCCESS");        },        error: function() {            console.log("ERROR");            console.log(errorThrown);        }    })};}})();</script>这是 REST 服务：@Path("/")public class ServiceA {    @POST    @Path("/servicea")    //@Consumes(MediaType.APPLICATION_JSON)    public Response postRequest(String obj) {        String res = "hii";        return Response.status(200).entity(obj).build();    }

Answer 1

您的代码中存在一些错误，请尝试在 chrome 开发人员工具中对其进行调试。我做了一些改变，它是有效的

    (function() {

    function toJSONString( form ) {

    var obj = {};

    var elements = form.querySelectorAll( "input, select" );

    for( var i = 0; i < elements.length; ++i ) {

        var element = elements[i];

        var name = element.name;

        var value = element.value;

        if( name ) {

            obj[ name ] = value;

        }

    }

    return JSON.stringify( obj );

}

window.onload = function() {

    var form = document.getElementById("test");

    var output = document.getElementById("output");

    form.onsubmit = function( e ) {

        e.preventDefault();

        var json = toJSONString( this );

                console.log(json);

        $.ajax({

            url: form.getAttribute( 'action' ),

            headers: { 

                'Accept': 'application/json',

                'Content-Type': "application/json; charset=utf-8"

            },

            type: 'POST',

            data: json,

            success: function(data) {

                alert("data saved")

            },

            error: function() {

                console.log(errorThrown);

            }

        })

    };

}

})();

Answer 2

尝试添加

dataType: "json",

contentType : "application/json"

到你的 $.ajax 方法

$.ajax({

            url: $form.attr( 'action' ),

            dataType: "json",

            contentType : "application/json"

            type: 'POST',

            data: json,

            success: function(data) {

                alert("data saved")

            },

            error: function() {

                console.log(errorThrown);

            }

        })

你也有；在 $.ajax 方法中的 url 字段中 - 所以最好将其删除；）此外，使用例如 PostMan 检查服务是否正常工作总是更好，所以你确定它不是服务端，我不知道你使用了什么框架，但是您也可以尝试更换

public Response postRequest(JSONObject object) {

和

public Response postRequest(String object) {

检查映射是否有问题