爲什麼我的表單數據被分成2個發佈請求？

Question

我有一個有3個文本輸入字段和1個文件輸入字段的表單。當我使用下面的腳本把數據上傳到服務器：

$("#submit_button").click(function(event){ 

    var product_name   = $("#product_name").val(), 
     product_price   = $("#product_price").val(), 
     product_description = $("#product_description").val(), 
     product_image   = $("#product_image").val(); 

    if (product_name && product_price) { 
     $.post(
      '/product/create', 
      { product_name: product_name, 
       product_price: product_price, 
       product_description: product_description, 
       product_image: product_image 
       } 
     ).fail(function(res){ 
      alert("Error: " + res.getResponseHeader("error")); 
     }); 
    } else { 
     if (! $("#form_err").length) 
     { 
     showErrorAlert("Please fill product name and price."); 
     } 
     return false; 
    } 
}); 

，並具有下列服務器JS腳本：

create: function(req, res) { 
    var product_name = req.param("product_name"), 
     product_price = req.param("product_price"), 
     product_description = req.param("product_description"), 
     product_image = req.param("product_image"); 

    console.log("product_name: " + product_name); 
    console.log("product_price: " + product_price); 
    console.log("product_description: " + product_description); 
    console.log("product_image: " + product_image); 

    if (req.method.toLowerCase() == 'post') { 
     if(req.files) console.log(util.inspect(req.files)); 
     if(req.file) console.log(util.inspect(req.file)); 
     if(req.body) console.log(util.inspect(req.body)); 
     return res.view({ 
      layout: "layout", 
      product_name: product_name}); 
    } 
    } 

我的表單數據被分成2個POST請求如在日誌中（第一個帶有文本字段數據，第二個帶有文件輸入數據）：

product_name: 9iiouiouoiu 
product_price: 9.00 
product_description: lijlijij 
product_image: undefined 
{ product_name: '9iiouiouoiu', 
    product_price: '9.00', 
    product_description: 'lijlijij' } 
product_name: undefined 
product_price: undefined 
product_description: undefined 
product_image: czarne_lampki.jpg 
{ product_image: 'dots.jpg' } 

爲什麼會發生這種情況？

EDIT

加入 event.preventDefault後（）;

我得到以下 - 不進行重新定向到所需的頁面product/create

product_name: pro 
product_price: 88.00 
product_description: wsad 
product_image: undefined 

body 
{ product_name: 'pro', 
    product_price: '88.00', 
    product_description: 'wsad' } 

Answer 1

的點擊觸發提交表單元素的帖子，在上面要添加的數據，在您的文章中的對象。

無論您需要在您點擊添加處理程序：

event.preventDefault(); 

，或者您需要刪除您在創建後，因爲你所有的表單元素都已經自動發佈自定義對象。

Answer 2

我不知道爲什麼，但我無法從<input type="file">表單中獲取文件名。相反，我用event.target.files如下：

$(function(){ 
    var file, 
     product_image_name, 
     product_image_size; 

    $('input[type=file]').on('change', prepareUpload); 

    // Grab the files and set them to our variable 
    function prepareUpload(event) 
    { 
     file = event.target.files[0]; 
     product_image_name = file.name; 
     product_image_size = file.size; 
    } 

    $("#form_new_product").submit(function(event){ 

     var product_name   = $("#product_name").val(), 
      product_price   = $("#product_price").val(), 
      product_description = $("#product_description").val(); 

     if (product_name && product_price) { 
      $.post(
       '/product/create', 
       { product_name: product_name, 
        product_price: product_price, 
        product_description: product_description, 
        product_image_name: product_image_name, 
        product_image_size: product_image_size 
        }) 
      .fail(function(res){ 
       alert("Error: " + res.getResponseHeader("error")); 
       }) 
      .done(function(res){ 
       showInfoAlert("Product : \"" + product_name + "\" has been added to catalog."); 
       }); 
      return false; 
     } else { 
      if (! $("#form_err").length) 
      { 
      showErrorAlert("Please fill product name and price."); 
      } 
      return false; 
     } 
     event.preventDefault(); 
    }); 
});