AJAX正在使用POST映射将所有空数据发送到Spring控制器

我正在尝试使用ajax将带有POST映射的HTML表单中的数据发送到spring控制器。但它发送的都是空数据。尝试了大量ajax变体。它正在发送学校对象，但所有字段都为空。控制台显示字段正在保存，但在AJAX中所有字段都变为空。

这是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>&lt;pre&gt;"
+ JSON.stringify(data, null, 4) + "&lt;/pre&gt;";
$('#feedback').html(json);
console.log("SUCCESS : ", data);
},
error: function (e) {
var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
+ e.responseText + "&lt;/pre&gt;";
$('#feedback').html(json);
console.log("ERROR : ", e);
}
});
});
});
</script>
</body>
</html>

这是控制器：

@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;
}
}

在ajax函数中，尝试将数据作为表单数据发送：

首先，使用HTMLForm:创建一个表单数据对象

let createSchoolForm = document.getElementById('createSchool');
let formData = new FormData(createSchoolForm );

然后，将它添加到Ajax对象中的data键中。删除header和dataType，因为它们可能与Ajax通信冲突。

$.ajax({
type : "post",
url : "Create",
data : formData
success: function (data) {
var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
+ JSON.stringify(data, null, 4) + "&lt;/pre&gt;";
$('#feedback').html(json);
console.log("SUCCESS : ", data);
},
error: function (e) {
var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
+ e.responseText + "&lt;/pre&gt;";
$('#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>&lt;pre&gt;"
+ JSON.stringify(data, null, 4) + "&lt;/pre&gt;";
$('#feedback').html(json);
console.log("SUCCESS : ", data);
},
error: function (e) {
var json = "<h4>Ajax Response</h4>&lt;pre&gt;"
+ e.responseText + "&lt;/pre&gt;";
$('#feedback').html(json);
console.log("ERROR : ", e);
}
});
});
});
</script>
</body>
</html>

适用于我的解决方案。

我尝试了不同的方法来解决这个问题。它实际上帮助我理解了HTTP请求是如何工作的。这是对我有效的解决方案。我使用XMLHttpRequest((从HTML表单发送数据。发送后，我必须用@RequestBody捕获数据。这对于POST的工作非常重要。我的控制器中还有两个不同的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>

控制器：

@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;
}
}

这些答案最终帮助我找到了一些依据。

如何将数据从HTML传输到控制器Spring

XMLHttpRequest未发送POST数据

相关内容

最新更新

热门标签：