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' }

为什么会这样？

修改

添加后 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();
    });
});

为什么我的表单数据被分成2个帖子请求？

2 个答案: