jQueryを使わずにフォームをシリアル化する方法は？

Question

多くの理由（まずはJavaScriptの学習）では、jQueryを使わずにフォームをシリアル化し、結果のシリアル化されたデータ構造をajaxを使ってPHPページに送信する必要があります。 シリアル化されたデータはJSON形式である必要があります。

どうすればいいですか？

--EDIT--

これは私のフォームはどのように見えるかさ：http://jsfiddle.net/XGD4X/

Answer 1

私は同様の問題に取り組んでいます、と私は使用することなく、第1プログラムする方法を学ぶために価値があることに同意フレームワーク。私は情報を保持するためにデータオブジェクト（BP.reading）を使用しています。私の場合は血圧の読み込みです。その後、JSON.stringify（dataObj）があなたのために仕事をします。

「保存」ボタンクリックのハンドラは、dataObjのメソッドです。メモデータを入力するためにテーブルの代わりにフォームを使用していますが、同じ考え方を適用する必要があります。

update: function() { 
      var arr = document.getElementById("BP_input_form").firstChild.elements, 
       request = JDK.makeAjaxPost(); // simple cross-browser httpxmlrequest with post headings preset 

      // gather the data and store in this data obj 
      this.name = arr[0].value.trim(); 
      ... 
      this.systolic = arr[3].value; 
      this.diastolic = arr[4].value; 

      // still testing so just put server message on page 
      request.callback = function (text) { 
       msgDiv.innerHTML += 'server said ' + text; 
      }; 
      // 
      request.call("BP_update_server.php", JSON.stringify(this)); 
     } 

私は私のプログラムでは、一般的なバージョンを表示するには、[編集] *

*これは

便利です願って、私は同じ種類のを、受信、表示を送信するためにオブジェクトを使用して、入力していますデータ、私はすでにオブジェクトを準備している。より迅速なソリューションの場合は、空のオブジェクトを使用してデータを追加するだけです。データが同じタイプのデータのセットである場合は、配列を使用します。しかし、オブジェクトの場合は、サーバー側で便利な名前を持っています。ここには未テストのより一般的なバージョンがありますが、jslintを渡しました。

function postUsingJSON() { 
    // collect elements that hold data on the page, here I have an array 
    var elms = document.getElementById('parent_id').elements, 
     // create a post request object 
     // JDK is a namespace I use for helper function I intend to use in other 
     // programs or that i use over and over 
     // makeAjaxPost returns a request object with post header prefilled 
     req = JDK.makeAjaxPost(), 
     // create object to hold the data, or use one you have already 
     dataObj = {}, // empty object or use array dataArray = [] 
     n = elms.length - 1;  // last field in form 

    // next add the data to the object, trim whitespace 
    // use meaningful names here to make it easy on the server side 
    dataObj.dataFromField0 = elms[0].value.trim(); // dataArray[0] = 
    //  .... 
    dataObj.dataFromFieldn = elms[n].value; 

    // define a callback method on post to use the server response 
    req.callback = function (text) { 
     // ... 
    }; 

    // JDK.makeAjaxPost.call(ULR, data) 
    req.call('handle_post_on_server.php', JSON.stringify(dataObj)); 
} 

Good Luck。私はjQueryの実装を見ていないので、何も100％でなかった

serialize = (form) -> 
    data = {} 
    for node in form.elements when not node.disabled and node.name 
    data[node.name] = node.value 
    data 

：

serialize = (form) -> 
    enabled = [].filter.call form.elements, (node) -> not node.disabled 
    pairs = [].map.call enabled, (node) -> 
    encoded = [node.name, node.value].map(encodeURIComponent) 
    encoded.join '=' 
    pairs.join '&' 

それとも、むしろキーと値のマップを好む場合：GETクエリ文字列を返す

Answer 2

CoffeeScriptの実装互換性が保証されます。