javascript - 您可以简单地将 JavaScript 对象替换为 JSON AJAX 响应吗？

Question

我有这个简洁的小 jQuery 插件，允许您通过传入 JavaScript 对象来获取和设置表单字段值。

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

我在这里有一个正在使用的演示: http://codepen.io/jasondavis/pen/jsmya?editors=101

我可以看到这个插件有用的主要领域可能是通过从 AJAX 响应填充表格。

在下面的演示中，我传入一个用于设置表单字段值的 JavaScript 对象。

为了使其在现实应用程序中有用，我认为它的主要用途是从 AJAX 响应填充表单。

所以我的问题，尽管可能很基本，但我不确定......

假设您单击一个触发 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

Can I simply pass in the JSON response into this jQuery plugin to fill the form values or does it need to be converted and processed in some other manner first?

Ajax 请求的响应默认是一个字符串(其中包含 JSON)。您要么必须 parse the JSON explicitly或配置 jQuery 来为您完成此操作(例如通过 dataType: 'json')。

但是，作为插件作者，这不应该是您关心的问题。明确您的 API 需要一个对象，并且由消费者来确保传递对象。