4


1

jQueryを使用してフォームの一部を「送信」する方法

スプレッドシートのようにレイアウトされたフォームがあります。 ユーザーが行を離れるとき、jQuery Ajaxを使用してその行のフィールドをサーバーに送信します。 ページは1つの大きなフォームであるため、これは実際にはJavaScriptが送信ボタンをクリックするシナリオではありません。フォームは巨大であり、速度の理由からコンテンツの一部のみを送信したいです。

行を識別し、行のフィールドを反復処理するコードを記述しました。 私の問題は、サーバー側で分解して保存できるわかりやすいものを送信するために、datオブジェクトを構築する方法です。

現在、私のコードは次のようになっています

var dat=[];
$("#" + finalrow).find("input").each(function () {
    var o = $(this).attr("name");
    var v = $(this).val();
    dat.push({ o: v });
});
$.ajax({
    url: 'UpdateRowAjax',
    dataType: 'json',
    type: 'POST',
    data: dat ,
    success: function (data) {
        renderAjaxResponse(data);
    }
});

datのアセンブリはまったく機能しません。 したがって、可能な限りフォーム送信のように「見える」ように、そのdatオブジェクトをどのように構築する必要があります。

3 Answer


7


送信するデータを含む要素をjQueryコレクションに追加し、そのオブジェクトで `serialize`メソッドを呼び出すことができます。 サーバーに送信できるパラメーター文字列を返します。

var params = $("#" + finalrow).find("input").serialize();

$.ajax({
    url: 'UpdateRowAjax',
    type: 'POST',
    data: params ,
    success: function (data) {
        renderAjaxResponse(data);
    }
});


3


$.param()を使用して、要素のリストをシリアル化できます。 たとえば、あなたのコードでは:

var dat= $.param($("input", "#finalrow"));
$.ajax({
    url: 'UpdateRowAjax',
    dataType: 'json',
    type: 'POST',
    data: dat ,
    success: function (data) {
        renderAjaxResponse(data);
    }
});
  • $。param()の例:http://jsfiddle.net/2nsTr/*

serialize()はこの関数にマッピングされるため、この方法で呼び出す方がわずかに効率的です。


2


$ .ajax 'data’パラメーターは、オブジェクトの配列ではなく、キー/値のペア(または文字列)のマップを想定しています。 これを試して:

var dat = {};
$("#" + finalrow).find("input").each(function () {
    dat[$(this).attr('name')] = $(this).val();
});