使用Ajax的NodeJS + Express


                    

我正在编写一个Web实用程序,该实用程序通过Ajax提交文件和某些表单字段。 我的表单中有一部分是动态的,因为其中可以有多行具有相同的值。 用户可以添加任意多的行。 表单还包含一个文件。</ p>

HTML最终具有以下效果:</ p>

  
     </ input>
     </ input>
     </ input>
     </ input>
     ....
     </ input>
     </ input>
</ form>
</ code> </ pre>

在单击“提交”按钮后,将调用以下Ajax:</ p>

  var mainForm = $(“#main-form”);
$ .ajax({
         网址:“ /”,
         输入:“ POST”,
         成功:successHandler,
         数据:mainForm.serialize(),
         完成:checkError,
         快取:false,
         processData:否
     });
</ code> </ pre>

这是问题。 我现在陷入了困境22。 通过Ajax传递文件的推荐方法是使用FormData对象。 问题是我无法让FormData与我的数组合作。 当NodeJS服务器收到Ajax提交作为FormData对象时,它不能很好地与表单数组配合使用。 它将它们视为单独的输入字段,例如(console.log(request.body)):</ p>

  {normalField:'normalResult',
   'inputField [0]':'test0',
   'inputField [1]':'test1',
   'inputField [2]':'test2',
   'inputField [3]':'test3',
}
</ code> </ pre>

.serialize()方法为我提供了一个不错的数组,如:</ p>

  {normalField:'normalResult',
   inputField:
    ['test1',
      'test2',
      'test3',
      'test4']
}
</ code> </ pre>

但是.serialize()不适用于文件提交。</ p>

因此,我想知道支持此的最佳方法是什么。 我的要求是表单提交后不能离开页面,所以我认为Ajax是正确的选择。</ p>

FormData是否可以通过输入数组和NodeJS Express很好地播放? 或为此进行任何工作? 当.serialize()表现得如此好时,我真的不想做某种类型的字符串查找。</ p>
     </ div>

展开原文

原文

I am writing a web utility that submits a file and some form fields via Ajax. There's a part of my form that is dynamic, as in it can have multiple rows for the same value. The user can add as many rows as they like. The form also takes in a file.

The HTML ends up being something to the effect of:

<form id="main-form">
    <input  name="inputField[0]" type="text"></input>
    <input  name="inputField[1]" type="text"></input>
    <input  name="inputField[2]" type="text"></input>
    <input  name="inputField[3]" type="text"></input>
    ....
    <input  name="inputField[i]" type="text"></input>
    <input type = "file" name="file></input>
</form>

Upon the submit button being clicked, the following Ajax is called:

var mainForm = $("#main-form");
$.ajax({
        url: '/',
        type: 'POST',
        success: successHandler,
        data: mainForm.serialize(),
        complete: checkError,
        cache: false,
        processData: false
    });

Here's the issue. I'm now stuck in a sort of catch-22. The recommended way to pass files through Ajax is using the FormData object. The problem is that I cannot get FormData to cooperate with my arrays. When the NodeJS server receives the Ajax submission as FormData object, it doesn't play nicely with the form arrays. It treats them as individual input fields like (console.log(request.body)):

{ normalField: 'normalResult',
  'inputField[0]': 'test0',
  'inputField[1]': 'test1',
  'inputField[2]': 'test2',
  'inputField[3]': 'test3',
}

where as the .serialize() method gives me a nice array like:

{ normalField: 'normalResult',
  inputField: 
   [ 'test1',
     'test2',
     'test3',
     'test4' ]
}

but .serialize() does not work with file submissions.

So, I'm wondering what the best way to support this. My requirements are that the form cannot leave the page upon submit, so I felt Ajax was the right way to go.

Is there any way for FormData to play nicely with input arrays and NodeJS Express? Or any sort of work around for this? I'd really rather not have to do some sort of string finagling when .serialize() does it so nicely.

2个回答


也许不是您要找的答案,但我认为这可能会解决您的问题:</ p>

只需更改您在服务器上收到的对象:</ p>

  {
   'inputField [0]':'test0',
   'inputField [1]':'test1',
   'inputField [2]':'test2',
   'inputField [3]':'test3',
  }
</ code> </ pre>

根据需要(mainForm是从客户端发送的对象的名称):</ p>

  var inputField = [];

用于(mainForm中的var val){
   inputField.push(mainForm [val]);
}
</ code> </ pre>

数组 inputField </ strong>现在包含正确格式的值(console.log(inputField)):</ p>

  ['test0','test1','test2','test3'];
</ code> </ pre>

提琴: https://jsfiddle.net/00ocdujy/3/ </ p>
     </ div>

展开原文

原文

Perhaps not the answer you are looking for but I think it might solve your issue:

Simply change the object that you recieve on the server:

{ 
  'inputField[0]': 'test0',
  'inputField[1]': 'test1',
  'inputField[2]': 'test2',
  'inputField[3]': 'test3',
 }

To what you want (mainForm being the name of the object sent from the client):

var inputField = [];

for (var val in mainForm) {
  inputField.push(mainForm[val]);
}

The array inputField now contains the values in the correct format (console.log(inputField)):

['test0', 'test1', 'test2', 'test3'];

Fiddle: https://jsfiddle.net/00ocdujy/3/


您似乎正在使用 jQuery </ em> </ strong>,所以我建议使用以下插件:</ p>

http://jquery.malsup.com/form/ </ p>


  1. 只需包含它:</ p>


    • &lt;/ script&gt; &lt;/ code&gt; &lt;/ li&gt;<br> &lt;/ ul&gt; &lt;/ li&gt;<br> <li> <p>使用以下方法:&lt;/ p&gt;</p> <p><ul><br> <li> <code> $(&#39;#main-form&#39;)。ajaxForm(function(){&lt;/ code&gt; &lt;/ li&gt;<br> &lt;/ ul&gt; &lt;/ li&gt;<br> &lt;/ ol&gt;</p> <p><p>查看链接以获取更多详细信息&lt;/ p&gt;<br>      &lt;/ div&gt;</p>

展开原文

原文

It looks like you're using jQuery, so I recommend using the following plugin:

http://jquery.malsup.com/form/

  1. Simply include it:

    • <script src="http://malsup.github.com/jquery.form.js"></script>
  2. Use the following method:

    • $('#main-form').ajaxForm(function() {

Check the link for more details on it

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐