我试图使用javascript和ajax将数据从index.html内的HTML表单发送到Java REST Web服务作为JSON数据。到目前为止,我尝试过在网上找到的任何内容,并且每当我收到HTTP错误415时仍然如此。
我知道那个错误的意思,但无法弄清楚我错在哪里,因为我还不熟悉javascript。
这是代码:
的index.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();
}
编辑
我编辑了我的代码......现在它正在运行。但为什么我需要将参数设置为String而不是JSONObject并删除@Consumes?在控制台中,我从我在ajax中发送的变量中获取此数据:{“Amount”:“213”,“Currency”:“eur”} ...所以我发送JSON,但服务仅在参数为String时有效。
最终编辑
我设法解决了这个问题,我缺少对jersey-json的依赖。谢谢 :)
您的代码中存在一些错误,请尝试在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);
}
})
};
}
})();
尝试添加
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) {
检查映射是否存在问题