为什么我的表单数据被分成 2 个发布请求？答案

【问题标题】：Why is my form data being split into 2 post request?为什么我的表单数据被分成 2 个发布请求？
【发布时间】：2014-01-26 15:25:13
【问题描述】：

我有一个包含 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' }

【问题讨论】：

标签： javascript forms node.js post sails.js

【解决方案1】：

点击提交会触发表单元素的发布，最重要的是，您正在将数据添加到帖子中的对象。

您需要在点击处理程序中添加：

 event.preventDefault();

或者您需要删除您在发布时创建的自定义对象，因为您的所有表单元素都已自动发布。

【讨论】：

您应该使用验证/提交来处理表单，而不是单击/发布

【解决方案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();
    });
});

【讨论】：