286

Backbone.jsモデルでフォームの事前サーバー検証を行いたいと考えています。これを行うには、ユーザー入力をフォームから使用可能なデータに取得する必要があります。これを行うには、次の 3 つの方法を見つけました。

  1. var input = $("#inputId").val();
  2. var input = $("form.login").serialize();
  3. var input = $("form.login").serializeArray();

残念ながら、どれも私が必要とする、再利用可能で開発可能な優れた JSON オブジェクトを提供していません。スタック オーバーフローに関するいくつかの質問を既に調べましたが、いくつかの余分なライブラリしか見つかりませんでした。

Underscore.js、現在の jQuery または Backbone.js はヘルパー メソッドを提供していませんか?

そのような機能に対する要求がないとは想像できません。

HTML

<form class="login">
    <label for="_user_name">username:</label>
    <input type="text" id="_user_name" name="user[name]" value="dev.pus" />
    <label for="_user_pass">password:</label>
    <input type="password" id="_user_pass" name="user[pass]" value="1234" />
    <button type="submit">login</button>
</form>

JavaScript

var formData = $("form.login").serializeObject();
console.log(formData);

出力

{
    "name": "dev.pus",
    "pass": "1234"
}

Backbone.js モデル

var user = new User(formData);
user.save();
4

15 に答える 15

290

このユースケースの関数は次のとおりです。

function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        indexed_array[n['name']] = n['value'];
    });

    return indexed_array;
}

使用法:

var $form = $("#form_data");
var data = getFormData($form);
于 2012-07-05T06:41:58.220 に答える
172

あなたはこれを行うことができます:

function onSubmit( form ){
  var data = JSON.stringify( $(form).serializeArray() ); //  <-----------

  console.log( data );
  return false; //don't submit
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form onsubmit='return onSubmit(this)'>
  <input name='user' placeholder='user'><br>
  <input name='password' type='password' placeholder='password'><br>
  <button type='submit'>Try</button>
</form>

これを参照してください:http://www.json.org/js.html

于 2012-07-05T06:27:26.433 に答える
75

以下のコードが役に立ちます。:)

 //The function is based on http://css-tricks.com/snippets/jquery/serialize-form-to-json/
 <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>

<script>
    $.fn.serializeObject = function() {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    $(function() {
        $('form.login').on('submit', function(e) {
          e.preventDefault();

          var formData = $(this).serializeObject();
          console.log(formData);
          $('.datahere').html(formData);
        });
    });
</script>
于 2014-03-15T06:24:40.993 に答える
43

使用する:

var config = {};
jQuery(form).serializeArray().map(function(item) {
    if ( config[item.name] ) {
        if ( typeof(config[item.name]) === "string" ) {
            config[item.name] = [config[item.name]];
        }
        config[item.name].push(item.value);
    } else {
        config[item.name] = item.value;
    }
});
于 2014-08-05T14:43:02.293 に答える
33

これがヘルパー関数の要件を満たしていないことはわかっていますが、これを行った方法は jQuery の $.each() メソッドを使用することです

var loginForm = $('.login').serializeArray();
var loginFormObject = {};
$.each(loginForm,
    function(i, v) {
        loginFormObject[v.name] = v.value;
    });

次に、loginFormObject をバックエンドに渡すか、ユーザーオブジェクトを作成して、バックボーンでも save() することができます。

于 2013-03-01T19:03:29.220 に答える
15

同じ問題 (複雑なプラグインやライブラリを使用しない検証) を解決しようとして、私はjQuery.serializeJSONを作成しました。

このプラグインは非常に人気がありましたが、別のプロジェクトで Backbone.js モデルを使用て検証ロジックを記述したいと考えていました。次にBackbone.Formwellを作成しました。これにより、検証メソッドによって返されたエラーをフォームに直接表示できます。

于 2014-01-08T03:18:43.910 に答える
10

同じ名前の繰り返しフォーム要素を気にしない場合は、次のことができます。

var data = $("form.login").serializeArray();
var formData = _.object(_.pluck(data, 'name'), _.pluck(data, 'value'));

ここではUnderscore.jsを使用しています。

于 2013-12-14T18:31:25.140 に答える
7

この状況でモジュールとして使用するものを次に示します (formhelper.js 内):

define(function(){
    FormHelper = {};

    FormHelper.parseForm = function($form){
        var serialized = $form.serializeArray();
        var s = '';
        var data = {};
        for(s in serialized){
            data[serialized[s]['name']] = serialized[s]['value']
        }
        return JSON.stringify(data);
    }

    return FormHelper;
});

自分がやりたいことをするための別の方法を見つけられないように見えるのは、ちょっと残念です。

これにより、次の JSON が返されます。

{"first_name":"John","last_name":"Smith","age":"30"}
于 2013-11-20T11:46:26.173 に答える
6

JSON を使用してフォームを送信する場合は、送信文字列の [] を削除する必要があります。jQuery 関数 serializeObject() でそれを行うことができます。

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeObject());

$.fn.serializeObject = function() {
    var o = {};
    //    var a = this.serializeArray();
    $(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() {
        if ($(this).attr('type') == 'hidden') { //if checkbox is checked do not take the hidden field
            var $parent = $(this).parent();
            var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]');
            if ($chb != null) {
                if ($chb.prop('checked')) return;
            }
        }
        if (this.name === null || this.name === undefined || this.name === '')
            return;
        var elemValue = null;
        if ($(this).is('select'))
            elemValue = $(this).find('option:selected').val();
        else elemValue = this.value;
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(elemValue || '');
        } else {
            o[this.name] = elemValue || '';
        }
    });
    return o;
}
于 2013-01-18T13:08:16.223 に答える
3

jQuery を使用して を回避serializeArrayすると、次のコードはフォーム データをシリアル化し、JSON 形式で送信します。

$("#commentsForm").submit(function(event){
    var formJqObj = $("#commentsForm");
    var formDataObj = {};
    (function(){
        formJqObj.find(":input").not("[type='submit']").not("[type='reset']").each(function(){
            var thisInput = $(this);
            formDataObj[thisInput.attr("name")] = thisInput.val();
        });
    })();
    $.ajax({
        type: "POST",
        url: YOUR_URL_HERE,
        data: JSON.stringify(formDataObj),
        contentType: "application/json"
    })
    .done(function(data, textStatus, jqXHR){
        console.log("Ajax completed: " + data);
    })
    .fail(function(jqXHR, textStatus, errorThrown){
        console.log("Ajax problem: " + textStatus + ". " + errorThrown);
    });
    event.preventDefault();
});
于 2014-05-20T23:15:24.053 に答える
1

私の貢献:

function serializeToJson(serializer){
    var _string = '{';
    for(var ix in serializer)
    {
        var row = serializer[ix];
        _string += '"' + row.name + '":"' + row.value + '",';
    }
    var end =_string.length - 1;
    _string = _string.substr(0, end);
    _string += '}';
    console.log('_string: ', _string);
    return JSON.parse(_string);
}

var params = $('#frmPreguntas input').serializeArray();
params = serializeToJson(params);
于 2014-06-26T19:08:54.740 に答える
1

さて、ここに便利なプラグインがあります: https://github.com/macek/jquery-serialize-object

その問題は次のとおりです。

コアのシリアル化に加えて、.serializeObject はブール値と数値の正しいシリアル化をサポートし、両方のケースで有効な型になります。

>= 2.1.0 でこれらを楽しみにしています

于 2014-08-14T08:13:03.800 に答える
-1

可能なヘルパーを1つ見つけました:

https://github.com/theironcook/Backbone.ModelBinder

フォームとまったく連絡を取りたくない人のために: https ://github.com/powmedia/backbone-forms

私は最初のリンクを詳しく見て、フィードバックを提供します:)

于 2012-07-05T07:35:11.047 に答える