我参与了一个项目，该项目将Spring用于后端，将jquery用于前端和ajax，以在它们之间建立通信。
通过Ajax发布表单数据时，我陷入了困境。
我需要将表单数据发送到控制器，但是当我直接发送表单数据时，它会收到400错误，但是如果我通过逐个检索输入并发送数据来执行相同的操作，则会成功保存它
假设我的表单包含30多个字段，我认为这不是一种便捷的方式来逐个检索字段并将其发送到服务器
我应该一次性发送整个表格数据。
400 $(document).ready(function(){
$("#save").click(function(){
alert(JSON.stringify(formData));
var url= "http://localhost:8080/CurdAppBackend/emp/save";
$.post({
url: url,
data: JSON.stringify($('form[name=loginform]').serialize()),
dataType: "json",
contentType: "application/json",
processData: false,
success: function(result){
alert("SAVED")
},
error: function(error){
alert(JSON.stringify(error));
}
});
});
});
$(document).ready(function(){
$("#save").click(function(){
alert(JSON.stringify(formData));
var url= "http://localhost:8080/CurdAppBackend/emp/save";
$.post({
url: url,
data: {
"empName":$("#empName").val(),
"empMob":$("#empMob").val(),
"empDesg":$("#empDesg").val(),
"unit":$("#unit").val()
},
dataType: "json",
contentType: "application/json",
processData: false,
success: function(result){
alert("SAVED")
},
error: function(error){
alert(JSON.stringify(error));
}
});
});
});
现在，请观察。我已经提到了一些文档，也尝试了各种方法将表单数据发送到服务器，但除了手动之外，其他所有方法都是徒劳的。
<div class="container">
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Add Employee</div>
<div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Need
Help?</a></div>
</div>
<div style="padding-top:30px" class="panel-body">
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form" name="loginform">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="empName" type="text" class="form-control" name="empName" value=""
placeholder="employee name">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="empMobile" type="text" class="form-control" name="empMobile"
placeholder="mobile">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="empDesg" type="text" class="form-control" name="empDesg"
placeholder="designation">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="unit" type="text" class="form-control" name="unit"
placeholder="unit">
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<a id="save" href="#" class="btn btn-success">Save </a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
@PostMapping("/save")
public ResponseEntity<EmployeeDTO> insertRecord(@ModelAttribute @Valid @RequestBody EmployeeDTO dto) {
EmployeeDTO dtoo= null;
dtoo= service.insertEmp(dto);
return new ResponseEntity<EmployeeDTO>(dtoo,HttpStatus.OK);
}
谁能知道如何直接发送表单数据而不是检索表单数据？
答案 0 :(得分：1)
尝试使用以下代码：
$(document).ready(function(){
$("#save").click(function(){
alert(JSON.stringify(formData));
var data = $('form[name=loginform]').serializeArray();
var url= "http://localhost:8080/CurdAppBackend/emp/save";
$.post({
url: url,
data: JSON.stringify(data),
dataType: "json",
contentType: "application/json",
processData: false,
success: function(result){
alert("SAVED")
},
error: function(error){
alert(JSON.stringify(error));
}
});
});
});
当您要将数据转换为Json时，serializeArray()更适合匹配，因为数据是结构化的，并且通过JSON.stringfy()的数据将生成Json字符串。 Serialize（）将创建一个编码的字符串，但不适合与jquery ajax调用一起使用，因为POST请求参数数据期望将内容类型设置为"application/json"的JSON。