前台使用jQuery ajax来post form表单,后台java来接参数,为何有些参数接不到?
以下我贴一下我的前端代码,为了让大佬看的清楚,我简化了一些没必要的东西,希望大佬们能帮我看看,到底是哪里的问题,让后台java接不到参数。
接不到的参数的name有:
upload_pic(多个相同name的upload_pic,是通过上传控件上传图片成功后返回的上传路径)
upload_doc(多个相同name的upload_doc,是通过上传控件上传文档成功后返回的上传路径)
parts_name与parts_remark(这两个是配套的,每次动态添加,都是添加一套)
代码如下:
<form name="add" id="add">
<input type="text" name="brand" id="brand">
<input type="text" name="model" id="model">
<input type="text" name="p_length" id="p_length">
<input type="text" name="width" id="width">
<input type="text" name="height" id="height">
<select name="length_unit" id="length_unit">
<option value="">请选择单位</option>
<option value="1">m(米)</option>
<option value="2">cm(厘米)</option>
</select>
<input type="text" name="weight" id="weight">
<select name="weight_unit" id="weight_unit">
<option value="">请选择单位</option>
<option value="1">kg(千克)</option>
<option value="2">t(吨)</option>
</select>
<textarea name="remark" id="remark" ></textarea>
<input type="text" name="upload_pic" class="upload_pic">
<input type="text" name="upload_pic" class="upload_pic">
<input type="text" name="upload_pic" class="upload_pic">
<input type="text" name="upload_doc" class="upload_doc">
<input type="text" name="upload_doc" class="upload_doc">
<input type="text" name="upload_doc" class="upload_doc">
<input type="text" name="parts_name" class="parts_name">
<input type="text" name="parts_remark" class="parts_remark">
<input type="text" name="parts_name" class="parts_name">
<input type="text" name="parts_remark" class="parts_remark">
<button type="button" id="submit" onClick="checkForm();">提交</button>
</form>
以下是js代码
function checkForm(){
var brand = add.brand.value,
model = add.model.value,
p_length = add.p_length.value,
width = add.width.value,
height = add.height.value,
length_unit = add.length_unit.value,
weight = add.weight.value,
weight_unit = add.weight_unit.value,
remark = $("#remark").val();
/* 产品图 */
var upload_pic = [];
document.getElementsByName('upload_pic').forEach(pic => {
upload_pic.push(pic.value);
});
console.log(JSON.stringify(upload_pic));
/* 设备文档 */
var upload_doc = [];
document.getElementsByName('upload_doc').forEach(doc => {
upload_doc.push(doc.value);
});
console.log(JSON.stringify(upload_doc));
/* 零部件 */
var parts = [];
$("input[name='parts_name']").each(function(i){
var remark = $("input[name='parts_remark']").eq(i);
parts.push({"name": $(this).val(), "remark": remark.val()});
});
console.log(JSON.stringify(parts));
if(!brand){
alert('brand为必填项');
return false;
}else if(!model){
alert('model为必填项');
return false;
}else{
var formData = new Object();
formData["brand"] = brand;
formData["model"] = model;
formData["p_length"] = p_length;
formData["width"] = width;
formData["height"] = height;
formData["length_unit"] = length_unit;
formData["weight"] = weight;
formData["weight_unit"] = weight_unit;
formData["remark"] = remark;
formData["upload_pic"] = upload_pic;
formData["upload_doc"] = upload_doc;
formData["parts"] = parts;
//这里打印了一下,数据没问题,格式也对
console.log(JSON.stringify(formData));
$.ajax({
type: "POST",
cache: false,
timeout: 5000,
url: "后台接口地址",
dataType: "json",
data: formData,
// 头部token验证,以及判断os是pc还是wap,此处java后台正常接收
headers: {'token':'123456','os':'1'},
success: function(data) {
//如何返回0000,则为操作成功,使用layer弹窗提示操作成功并返回列表
if (data.code == '0000') {
layer.msg(data.desc, {icon: 1}, function(){
window.location.href="?act=index"
});
} else {
//使用layer弹窗提示
layer.msg(data.desc, {icon: 5}, function(index){
layer.close(index);
});
}
},
error: function(data) {
//使用layer弹窗提示
layer.msg("提交错误,请重新提交!", {icon: 5}, function(index){
layer.close(index);
});
}
});
}
}
upload_pic,upload_doc
以上2个name的多个相同的元素,是通过上传控件上传成功后,通过控件中的上传成功执行的方法,使用append动态添加的,返回的值是上传路径,已通过打印确认没问题
parts_name与parts_remark(这两个是配套的,每次动态添加,都是添加一套)
配套的这2个name,也是通过js方法动态添加的,每次添加都是一套,他们是对应的
奇怪的是,java后台就是接不到upload_pic,upload_doc,parts_name与parts_remark,这几个参数的值,也是奇怪了
希望大佬们能帮忙看看,到底是哪里的问题,十分感谢,鞠躬!
1.查看你的请求头是携带的参数是否符合预期
2.后台是否正确的接收
java后台如何获取前台FormData数据