Question

我有这个简洁的小jQuery插件，它允许你通过传入一个JavaScript对象来获取GEt和Set Form字段值。

传入的Object具有与表单字段名称匹配的属性名称，其值将在HTML表单上设置。

我在这里使用它的演示： http://codepen.io/jasondavis/pen/jsmya?editors=101

我可以看到这个插件很有用的主要区域可能是从AJAX响应中填写一个FOrm。

在下面的演示中，我传入了一个JavaScript对象，它设置了Form字段值。

为了使它在现实生活中的应用程序中有用，我看到它;主要用于从AJAX响应中填充Form。

所以我的问题，基本上可能是我不确定的......

假设您单击一个触发AJAX请求的按钮，返回值是JSON响应。我可以简单地将JSON响应传递到此jQuery插件中以填充表单值，还是需要先以其他方式进行转换和处理？

表单form-field-name: 'form-field-value'的JavaScript对象看起来像这样......

var formFieldValues = {
    text:'text',
    text2:'text2',
    text3:'text3',
    radio:1
}

我的演示代码：

/*
 * jQuery.formFieldValues: get or set all of the name/value pairs from child input controls
* @argument data {array} If included, will populate all child controls.
* @returns element if data was provided, or array of values if not
*/
$.fn.formFieldValues = function(data) {
    var els = this.find(':input').get();

    if(arguments.length === 0) {
        // return all data
        data = {};

        $.each(els, function() {
            if (this.name && !this.disabled && (this.checked
                            || /select|textarea/i.test(this.nodeName)
                            || /text|hidden|password/i.test(this.type))) {
                if(data[this.name] == undefined){
                    data[this.name] = [];
                }
                data[this.name].push($(this).val());
            }
        });
        return data;
    } else {
        $.each(els, function() {
            if (this.name && data[this.name]) {
                var names = data[this.name];
                var $this = $(this);
                if(Object.prototype.toString.call(names) !== '[object Array]'){
                    names = [names]; //backwards compat to old version of this code
                }
                if(this.type == 'checkbox' || this.type == 'radio') {
                    var val = $this.val();
                    var found = false;
                    for(var i = 0; i < names.length; i++){
                        if(names[i] == val){
                            found = true;
                            break;
                        }
                    }
                    $this.attr("checked", found);
                } else {
                    $this.val(names[0]);
                }
            }
        });
        return this;
    }
};

$(document).ready(function($) {

    // Object with Form field values. (Form Field Name: 'value')
    var formFieldValues = {
        text:'text',
        text2:'text2',
        text3:'text3',
        radio:1
    }

    // Set Form Field Values
    $('#my-form').formFieldValues(formFieldValues);

    // Get Form Field Values
    console.log($('#my-form').formFieldValues());  

});

Answer 1

我可以简单地将JSON响应传递到此jQuery插件中以填充表单值，还是需要先以其他方式进行转换和处理？

Ajax请求的响应默认为字符串（包含JSON）。您必须parse the JSON explicitly或配置jQuery才能为您执行此操作（例如，通过dataType: 'json'）。

然而，作为插件作者，这不应该是您关注的问题。明确表示您的API需要一个对象，并且由消费者决定是否传递对象。

Answer 2

我相信你想要

var jsonObj = JSON.parse(els);

然后在代码中使用objJSON。

你能简单地用JSON AJAX响应替换JavaScript对象吗？

2 个答案: