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

Question

我正在尝试使用 javascript 和 ajax 将 index.html 中的 HTML 表单中的数据作为 JSON 数据发送到 Java REST Web 服务。到目前为止，我尝试了我在网上找到的任何东西，但每次我收到 HTTP 错误 415 时仍然如此。

我知道该错误的含义，但无法弄清楚我错在哪里，因为我对 javascript 还不太熟悉。

这是代码：

索引.html

div 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 开发人员工具中对其进行调试。我做了一些改变，它是有效的&nbsp; &nbsp; (function() {&nbsp; &nbsp; function toJSONString( form ) {&nbsp; &nbsp; var obj = {};&nbsp; &nbsp; var elements = form.querySelectorAll( "input, select" );&nbsp; &nbsp; for( var i = 0; i < elements.length; ++i ) {&nbsp; &nbsp; &nbsp; &nbsp; var element = elements[i];&nbsp; &nbsp; &nbsp; &nbsp; var name = element.name;&nbsp; &nbsp; &nbsp; &nbsp; var value = element.value;&nbsp; &nbsp; &nbsp; &nbsp; if( name ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; obj[ name ] = value;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; return JSON.stringify( obj );}window.onload = function() {&nbsp; &nbsp; var form = document.getElementById("test");&nbsp; &nbsp; var output = document.getElementById("output");&nbsp; &nbsp; form.onsubmit = function( e ) {&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; var json = toJSONString( this );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(json);&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: form.getAttribute( 'action' ),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headers: {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Accept': 'application/json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Content-Type': "application/json; charset=utf-8"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: json,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("data saved")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(errorThrown);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; };}})();

Answer 2

尝试添加dataType: "json",contentType : "application/json"到你的 $.ajax 方法$.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: $form.attr( 'action' ),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: "json",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentType : "application/json"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: json,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("data saved")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(errorThrown);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })你也有；在 $.ajax 方法中的 url 字段中 - 所以最好将其删除；）此外，使用例如 PostMan 检查服务是否正常工作总是更好，所以你确定它不是服务端，我不知道你使用了什么框架，但是您也可以尝试更换public Response postRequest(JSONObject object) {和public Response postRequest(String object) {检查映射是否有问题