前台使用jQuery ajax来post form表单,后台java来接参数,为何有些参数接不到?

前台使用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,这几个参数的值,也是奇怪了

希望大佬们能帮忙看看,到底是哪里的问题,十分感谢,鞠躬!

阅读 3.5k
2 个回答

upload_pic
upload_doc
改成这种写法
upload_pic[]
upload_doc[]
这样说,你应该一看就明白了吧?

另外还有一种可能就是参数被截断了,就是是否包含& = 这种符号,如果参数中也有,那么在post数据body里就会截断。

推荐问题
宣传栏