AJAX 正在使用 POST 映射將所有 null 數據發送到 Spring Controller？
[英]AJAX is sending all null data to the Spring Controller using POST mapping?
問題描述
我正在嘗試使用 ajax 將數據從 HTML 表單發送到 spring controller。但它正在發送所有 null 數據。 為 ajax 嘗試了很多變化。它正在發送學校 object，但所有字段都是 null。控制台顯示字段正在保存，但在 AJAX 中全部變為 null。
這是 createSchoolForm.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<title>Create School || EDUBD</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
</head>
<body>
<h1>EDUBD - Manage School Portal</h1>
<h3>Create New School</h3> <br>
<form id="createSchool">
<br>
<label>School Name:
<input type="text" id="schoolName" value="" />
</label>
<br>
<label>School Email:
<input type="text" id="schoolEmail" value="" />
</label>
<br>
<label>School Phone Number:
<input type="tel" id="schoolPhone" value="" />
</label>
<br>
<input id="btn" type="submit" value="Submit" />
</form>
<div id="feedback"></div>
<script>
$(document).ready( function() {
$("#createSchool").submit(function(e){
e.preventDefault();
var schoolData = {
schoolName: $("#schoolName").val(),
schoolEmail: $("#schoolEmail").val(),
schoolPhone: $("#schoolPhone").val(),
status: null,
schoolStreet: null,
schoolHouse: null,
schoolZip: null,
schoolCity: null,
schoolState: null,
schoolCountry: null,
image: null,
createBy: null,
updatedBy: null,
createdDate: null,
updatedDate: null,
id: null
};
// let j = JSON.stringify(schoolData);
console.log(JSON.stringify(schoolData));
$.ajax({
header:{
contentType : 'application/x-www-form-urlencoded; charset=UTF-8'
},
type : "post",
url : "Create",
data : JSON.stringify(schoolData),
dataType : "json",
success: function (data) {
var json = "<h4>Ajax Response</h4><pre>"
+ JSON.stringify(data, null, 4) + "</pre>";
$('#feedback').html(json);
console.log("SUCCESS : ", data);
},
error: function (e) {
var json = "<h4>Ajax Response</h4><pre>"
+ e.responseText + "</pre>";
$('#feedback').html(json);
console.log("ERROR : ", e);
}
});
});
});
</script>
</body>
</html>
這是 controller：
@ApiOperation(value = "Create School")
//@PostMapping(BASE_SCHOOL_PATH+"/Create")
@PostMapping(value = BASE_SCHOOL_PATH+"/Create", produces = {"application/json"},
consumes = {"application/x-www-form-urlencoded"})
public String create (School school, @ApiIgnore HttpServletResponse response) throws IOException {
// components tests are expecting this assertion and exception handling, and will fail if removed
try {
Assert.isNull(school.getId(), "School ID field must be null");
Assert.notNull(school.getSchoolEmail(),"School email cannot be null.");
Assert.notNull(school.getSchoolPhone(),"School Phone number cannot be null. ");
Assert.isNull(schoolDao.readByEmail(school.getSchoolEmail()),"School already exists in the system.");
schoolDao.create(school, null);
return "createSchoolForm";
} catch (IllegalArgumentException e) {
logger.error(e.getMessage(), e);
response.sendError(HttpServletResponse.SC_PRECONDITION_FAILED, e.getMessage());
return null;
} catch (Exception e) {
logger.error(e.getMessage(), e);
response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR, e.getMessage());
return null;
}
}
2 個解決方案
解決方案1
0 2020-12-22 00:01:32
在您的 ajax function 中，嘗試將數據作為表單數據發送：
首先，使用HTML Form創建一個表單數據object：
let createSchoolForm = document.getElementById('createSchool');
let formData = new FormData(createSchoolForm );
然后將其添加到Ajax object中的data鍵中。去除header和dataType ，因為它可能與Ajax通信沖突。
$.ajax({
type : "post",
url : "Create",
data : formData
success: function (data) {
var json = "<h4>Ajax Response</h4><pre>"
+ JSON.stringify(data, null, 4) + "</pre>";
$('#feedback').html(json);
console.log("SUCCESS : ", data);
},
error: function (e) {
var json = "<h4>Ajax Response</h4><pre>"
+ e.responseText + "</pre>";
$('#feedback').html(json);
console.log("ERROR : ", e);
}
});
完整示例：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<title>Create School || EDUBD</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
</head>
<body>
<h1>EDUBD - Manage School Portal</h1>
<h3>Create New School</h3> <br>
<form id="createSchool">
<br>
<label>School Name:
<input type="text" id="schoolName" value="" />
</label>
<br>
<label>School Email:
<input type="text" id="schoolEmail" value="" />
</label>
<br>
<label>School Phone Number:
<input type="tel" id="schoolPhone" value="" />
</label>
<br>
<input id="btn" type="submit" value="Submit" />
</form>
<div id="feedback"></div>
<script>
$(document).ready( function() {
$("#createSchool").submit(function(e){
e.preventDefault();
var schoolData = {
schoolName: $("#schoolName").val(),
schoolEmail: $("#schoolEmail").val(),
schoolPhone: $("#schoolPhone").val(),
status: null,
schoolStreet: null,
schoolHouse: null,
schoolZip: null,
schoolCity: null,
schoolState: null,
schoolCountry: null,
image: null,
createBy: null,
updatedBy: null,
createdDate: null,
updatedDate: null,
id: null
};
// let j = JSON.stringify(schoolData);
console.log(JSON.stringify(schoolData));
let createSchoolForm = document.getElementById('createSchool');
let formData = new FormData(createSchoolForm );
$.ajax({
type : "post",
url : "Create",
data : formData
success: function (data) {
var json = "<h4>Ajax Response</h4><pre>"
+ JSON.stringify(data, null, 4) + "</pre>";
$('#feedback').html(json);
console.log("SUCCESS : ", data);
},
error: function (e) {
var json = "<h4>Ajax Response</h4><pre>"
+ e.responseText + "</pre>";
$('#feedback').html(json);
console.log("ERROR : ", e);
}
});
});
});
</script>
</body>
</html>
解決方案2
0 已采納 2020-12-22 17:22:46
對我有用的解決方案。
我嘗試了不同的方法來解決這個問題。 它實際上幫助我理解了 HTTP 請求是如何工作的。 這是對我有用的解決方案。 我使用 XMLHttpRequest() 從 HTML 表單發送數據。 發送后，我必須使用@RequestBody捕獲數據。 這對於 POST 的工作很重要。 我的 controller 中也有 2 種不同的produces和consumes 。必須匹配它們。 最后，使用<button>代替<input>進行提交。
解決方案
新的 HTML 看起來像這樣：
<h3>Create New School</h3> <br>
<form id="createSchool" method="post">
<br>
<label>School Name:
<input type="text" id="schoolName" value="" required/>
</label>
<br>
<label>School Email:
<input type="email" id="schoolEmail" value="" required/>
</label>
<br>
<label>School Phone Number:
<input type="tel" id="schoolPhone" value="" required/>
</label>
<br>
<button type="button" id="submit">Submit Form</button>
</form>
<div id="feedback"></div>
<script>
$(document).ready( function() {
$("#submit").click(function(e) {
e.preventDefault();
var school=new Object(); //creating object to add values.
school.schoolName = $("#schoolName").val();
school.schoolEmail= $("#schoolEmail").val();
school.schoolPhone = $("#schoolPhone").val();
school.status= null;
school.schoolStreet= null;
school.schoolHouse= null;
school.schoolZip= null;
school.schoolCity= null;
school.schoolState= null;
school.schoolCountry= null;
school.image= null;
school.createBy= null;
school.updatedBy= null;
school.createdDate= null;
school.updatedDate= null;
school.id= null;
var s2=JSON.stringify(school);
console.log(s2);
var xhr = new XMLHttpRequest();
xhr.open("POST", "SchoolCreate",true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() { // Call a function when the state changes.
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// Request finished. Do processing here.
console.log("success");
$('#feedback').html("Success");
}
else {
console.log(xhr.responseText);
$('#feedback').html(xhr.responseText);
}
}
xhr.send(s2);
//This will empty the fields after submission.
document.getElementById('schoolName').value='';
document.getElementById('schoolEmail').value='';
document.getElementById('schoolPhone').value='';
});
});
</script>
</body>
Controller：
@ApiOperation(value = "Create School")
@PostMapping(value = "/ManageSchool"+BASE_SCHOOL_PATH+"/SchoolCreate", produces = {"application/json"},
consumes = {"application/json"})
public String create (@RequestBody School school, @ApiIgnore HttpServletResponse response) throws IOException {
// components tests are expecting this assertion and exception handling, and will fail if removed
try {
Assert.isNull(school.getId(), "School ID field must be null");
Assert.notNull(school.getSchoolEmail(),"School email cannot be null.");
Assert.notNull(school.getSchoolPhone(),"School Phone number cannot be null. ");
Assert.isNull(schoolDao.readByEmail(school.getSchoolEmail()),"School already exists in the system.");
schoolDao.create(school, null);
return "createSchoolForm";
} catch (IllegalArgumentException e) {
logger.error(e.getMessage(), e);
response.sendError(HttpServletResponse.SC_PRECONDITION_FAILED, e.getMessage());
return null;
} catch (Exception e) {
logger.error(e.getMessage(), e);
response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR, e.getMessage());
return null;
}
}
這些答案最終幫助我找到了一些基礎。
使用Ajax將動態表單字段數據發布到Spring Rest Controller
[英]Post dynamic form field data to spring rest controller using ajax
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.