鍍金池/ 問(wèn)答/HTML/ 前臺(tái)使用jQuery ajax來(lái)post form表單,后臺(tái)java來(lái)接參數(shù),為

前臺(tái)使用jQuery ajax來(lái)post form表單,后臺(tái)java來(lái)接參數(shù),為何有些參數(shù)接不到?

前臺(tái)使用jQuery ajax來(lái)post form表單,后臺(tái)java來(lái)接參數(shù),為何有些參數(shù)接不到?

以下我貼一下我的前端代碼,為了讓大佬看的清楚,我簡(jiǎn)化了一些沒(méi)必要的東西,希望大佬們能幫我看看,到底是哪里的問(wèn)題,讓后臺(tái)java接不到參數(shù)。

接不到的參數(shù)的name有:
upload_pic(多個(gè)相同name的upload_pic,是通過(guò)上傳控件上傳圖片成功后返回的上傳路徑)
upload_doc(多個(gè)相同name的upload_doc,是通過(guò)上傳控件上傳文檔成功后返回的上傳路徑)
parts_name與parts_remark(這兩個(gè)是配套的,每次動(dòng)態(tài)添加,都是添加一套)

代碼如下:

<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="">請(qǐng)選擇單位</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="">請(qǐng)選擇單位</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();

    /* 產(chǎn)品圖 */
    var upload_pic = [];
    document.getElementsByName('upload_pic').forEach(pic => {
        upload_pic.push(pic.value);
    });

    console.log(JSON.stringify(upload_pic));

    /* 設(shè)備文檔 */
    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為必填項(xiàng)');
        return false;
    }else if(!model){
        alert('model為必填項(xiàng)');
        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;
        
        //這里打印了一下,數(shù)據(jù)沒(méi)問(wèn)題,格式也對(duì)
        console.log(JSON.stringify(formData));

        $.ajax({
            type: "POST",
            cache: false,
            timeout: 5000,
            url: "后臺(tái)接口地址",
            dataType: "json",
            data: formData,
            // 頭部token驗(yàn)證,以及判斷os是pc還是wap,此處java后臺(tái)正常接收
            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("提交錯(cuò)誤,請(qǐng)重新提交!", {icon: 5}, function(index){
                    layer.close(index);
                });
            }
        });
    }
}

upload_pic,upload_doc
以上2個(gè)name的多個(gè)相同的元素,是通過(guò)上傳控件上傳成功后,通過(guò)控件中的上傳成功執(zhí)行的方法,使用append動(dòng)態(tài)添加的,返回的值是上傳路徑,已通過(guò)打印確認(rèn)沒(méi)問(wèn)題

parts_name與parts_remark(這兩個(gè)是配套的,每次動(dòng)態(tài)添加,都是添加一套)
配套的這2個(gè)name,也是通過(guò)js方法動(dòng)態(tài)添加的,每次添加都是一套,他們是對(duì)應(yīng)的

奇怪的是,java后臺(tái)就是接不到upload_pic,upload_doc,parts_name與parts_remark,這幾個(gè)參數(shù)的值,也是奇怪了

希望大佬們能幫忙看看,到底是哪里的問(wèn)題,十分感謝,鞠躬!

回答
編輯回答
扯機(jī)薄

1.查看你的請(qǐng)求頭是攜帶的參數(shù)是否符合預(yù)期
2.后臺(tái)是否正確的接收
java后臺(tái)如何獲取前臺(tái)FormData數(shù)據(jù)

2017年10月6日 22:57
編輯回答
獨(dú)特范

upload_pic
upload_doc
改成這種寫(xiě)法
upload_pic[]
upload_doc[]
這樣說(shuō),你應(yīng)該一看就明白了吧?

另外還有一種可能就是參數(shù)被截?cái)嗔耍褪鞘欠癜?amp; = 這種符號(hào),如果參數(shù)中也有,那么在post數(shù)據(jù)body里就會(huì)截?cái)唷?/p>

2017年5月10日 15:14