15

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

どうやってやるの？

- 編集 -

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

4

2 に答える 2

2

私は同様の問題に取り組んでおり、フレームワークを使用せずに最初にプログラミングする方法を学ぶ価値があることに同意します. データ オブジェクト (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));
}

幸運を。

于 2012-04-26T14:54:22.447 に答える
1

GET クエリ文字列を返す CoffeeScript 実装:

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

または、キーと値のマップを好む場合は、次のようにします。

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

私は jQuery の実装を見ていないので、100% の互換性は保証されていません。

于 2014-01-18T20:37:42.270 に答える