AJAXなしでオブジェクトの配列をPOSTすることは可能ですか？

Question

AJAXのない通常のフォームを使用してオブジェクトの配列を送信しようとしていますが、リクエストボディがオブジェクトの配列に解析されるのではなく、オブジェクトの名前に対応するフィールドが多くあります。

プリミティブの配列を送信するときに、同じ名前の入力を数多く入力するだけで、入力されることがわかります。しかし、私は複雑なオブジェクトにこれを適用することで私の頭を包んでいるようには見えません。

マイフォームコードは非常に簡単です：私は私の問題を示すサンプルリポジトリを作った

<div class="col-sm-9"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="form"> 
       <div class="form-group"> 
        <label for="attachment[0].name" class="control-label">Name</label> 
        <input name="attachment[0].name" class="form-control" value="First Name" type="text"> 
       </div> 
       <div class="form-group"> 
        <label for="attachment[0].uri" class="control-label">URI</label> 
        <input name="attachment[0].uri" class="form-control" value="First URI" type="text"> 
       </div> 
       <div class="form-group"> 
        <label for="attachment[0].description" class="control-label">Description</label> 
        <textarea rows="4" value="First Description" name="attachment[0].description" class="form-control">First Description</textarea> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="form"> 
       <div class="form-group"> 
        <label for="attachment[1].name" class="control-label" >Name</label> 
        <input name="attachment[1].name" class="form-control" value="Second Name" type="text"> 
       </div> 
       <div class="form-group"> 
        <label for="attachment[1].uri" class="control-label">URI</label> 
        <input name="attachment[1].uri" class="form-control" value="Second URI" type="text"> 
       </div> 
       <div class="form-group"> 
        <label for="attachment[1].description" class="control-label">Description</label> 
        <textarea rows="4" name="attachment[1].description" class="form-control">Second Description</textarea> 
       </div> 
      </div> 
     </div> 
    </div> 

。 https://github.com/xueye/express-form-issuenode server.jsを実行し、http://localhost:3000に移動してエントリを送信します。リクエスト本体がコンソールに表示され、次のように表示されます。

{ name: '', 
    type: '', 
    'attachment[0].name': 'First Name', 
    'attachment[0].uri': 'First URI', 
    'attachment[0].description': 'First Description', 
    'attachment[1].name': 'Second Name', 
    'attachment[1].uri': 'Second URI', 
    'attachment[1].description': 'Second Description' } 

私が試行している方法でデータをPOSTすることは可能ですか？

Answer 1

通常のフォームまたはJavaScriptを使用してPOSTリクエストを行うと、書式設定されたテキストがサーバーに送信されます。

配列を送信することはできませんが、配列のテキスト表現を送信することはできます。

なしthe data formats supported by formsには、データの配列を表す標準的な方法があります。

パターン（PHPで導入されました）は、配列のような構造を表すために角かっこを使います。

JavaScriptスタイルのドット表記を使用する場合を除いて、これは使用しているものと似ています。純粋に角括弧を使用して切り替えます。

name="attachment[1][uri]" 

...ただし、サーバー上でそのデータ形式をデコードする必要があります。

var bodyParser = require("body-parser"); 
var phpStyleParser = bodyParser.urlencoded({ extended: true }) 

と

app.post('/example', phpStyleParser, function(req, res) { 
    console.log(req.body); 
    res.json(req.body); 
});