jQuery 및 JSON을 사용하여 양식을 채우시겠습니까?

jQuery 및 JSON을 사용하여 양식을 채우시겠습니까?

JSON을 사용하여 폼을 입력하는 방법은 무엇입니까?

JSON 문자열은 php를 사용하여 얻을 수 있습니다.json_encode()또한 JSON 문자열을 사용하여 폼 컨트롤(텍스트 영역 또는 텍스트 입력 등)을 채웁니다.

외부 플러그인(예: jQuery populate plugin)을 사용하지 않고 이러한 작업을 수행하려면 어떻게 해야 합니까?

편집: JSON 형식:

[{"id":"41","parent_id":null,"node_name":"name","slug":"","lft":"3","rgt":"4"}]

이것은 json_encode()에서 얻은 것입니다.

에 문제가 있습니다.textarea그 후, 그것을 「」로 변경합니다.default스위치 값

이를 통해 값을 Many Controls에 할당합니다.

function populate(frm, data) {   
    $.each(data, function(key, value) {  
        var ctrl = $('[name='+key+']', frm);  
        switch(ctrl.prop("type")) { 
            case "radio": case "checkbox":   
                ctrl.each(function() {
                    if($(this).attr('value') == value) $(this).attr("checked",value);
                });   
                break;  
            default:
                ctrl.val(value); 
        }  
    });  
}

텍스트 컨트롤(무선 또는 확인란 없음)의 경우 간단한 버전의 채우기 기능을 만들 수 있습니다.

function populate(frm, data) {
  $.each(data, function(key, value){
    $('[name='+key+']', frm).val(value);
  });
}

사용 예:

populate('#MyForm', $.parseJSON(data));

데모: http://jsfiddle.net/Guffa/65QB3/3/

고마워 나우샤스그것은 나에게 효과가 있었다.일부 옵션도 입력할 수 있도록 귀하의 버전에 추가 체크를 추가했습니다.

function populateForm(frm, data) {   
$.each(data, function(key, value){  
    var $ctrl = $('[name='+key+']', frm); 
    if($ctrl.is('select')){
        $("option",$ctrl).each(function(){
            if (this.value==value) { this.selected=true; }
        });
    }
    else {
        switch($ctrl.attr("type"))  
        {  
            case "text" :   case "hidden":  case "textarea":  
                $ctrl.val(value);   
                break;   
            case "radio" : case "checkbox":   
                $ctrl.each(function(){
                   if($(this).attr('value') == value) {  $(this).attr("checked",value); } });   
                break;
        } 
    } 
});  


}; // end of populateForm() function 

약간의 개선(옵션 버튼 제외):

function resetForm($form)
{
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
}

function populateForm($form, data)
{
    resetForm($form);
    $.each(data, function(key, value) {
        var $ctrl = $form.find('[name='+key+']');
        if ($ctrl.is('select')){
            $('option', $ctrl).each(function() {
                if (this.value == value)
                    this.selected = true;
            });
        } else if ($ctrl.is('textarea')) {
            $ctrl.val(value);
        } else {
            switch($ctrl.attr("type")) {
                case "text":
                case "hidden":
                    $ctrl.val(value);   
                    break;
                case "checkbox":
                    if (value == '1')
                        $ctrl.prop('checked', true);
                    else
                        $ctrl.prop('checked', false);
                    break;
            } 
        }
    });
};

이것은 @Nowshath의 답변에 대한 부록입니다.

이는 다단계 객체에도 적용됩니다.

 populateForm(form, data) {
    $.each(data, function(key, value) {

        if(value !== null && typeof value === 'object' ) {
            this.populateForm(form, value);
        }
        else {
            var ctrl = $('[name='+key+']', form);
            switch(ctrl.prop("type")) {
                case "radio": case "checkbox":
                ctrl.each(function() {
                    $(this).prop("checked",value);
                });
                break;
                default:
                    ctrl.val(value);
            }
        }
    }.bind(this));
}

$.serializeJ의 결과 등 다차원 json 형식에서 채우기를 원하는 사용자가 있는 경우SON [ https://github.com/marioizquierdo/jquery.serializeJSON ], 플랫 포맷으로 변환하는 기능이 있습니다.

function json2html_name_list(json, result, parent){
    if(!result)result = {};
    if(!parent)parent = '';
    if((typeof json)!='object'){
        result[parent] = json;
    } else {
        for(var key in json){
            var value = json[key];
            if(parent=='')var subparent = key;
            else var subparent = parent+'['+key+']';
            result = json2html_name_list(value, result, subparent);
        }
    }
    return result;
}

위의 함수의 사용 예:

populateForm($form, json2html_name_list(json))

그러나 위의 모든 예에서는 다음과 같습니다.

var $ctrl = $('[name='+key+']', frm);

로 변경할 필요가 있다

var $ctrl = $('[name="'+key+'"]', frm);

jQuery에서 구문 오류를 방지하려면

이 기능을 사용하려면 목록 배열에 숫자(예: fruit[] 대신 fruit[0])를 입력해야 합니다.

일이 좀 복잡해질 수 있어도구를 사용하여 JSON을 해석하는 것이 가장 좋습니다.간단한 양식을 쉽게 만들 수 있지만 구문 분석해야 합니다.

대신 이 플러그인을 체크 아웃하십시오.http://neyeon.com/2011/01/creating-forms-with-json-and-jquery/

또는 ext4를 사용할 수 있습니다.

이상하지만 유효한 JSON 구문:

    [{'name':<field_name>,'value':<field_value>},
    {'name':<field_name>,'value':<field_value>},
    {'name':<field_name>,'value':<field_value>},
    {'name':<field_name>,'value':<field_value>}]

이 http://jsfiddle.net/saurshaz/z66XF/ 를 봐 주세요.

어플리케이션에서 이 이상한 구문을 사용하여 위와 같은 논리를 작성했습니다.

이름 선택기에 따옴표가 없기 때문에 원본 스크립트가 배열[] 이름과 잘 어울리지 않습니다.

var $ctrl = $('[name="'+key+'"]', frm); 

저도 같은 문제가 있어서 위의 버전을 조금 더 개발했습니다.이제 값을 반환하는 개별 체크박스와 이름 배열을 반환하는 그룹을 가질 수 있습니다.코드는 테스트, 사용, 올바르게 동작하고 있다.

        function populateForm($form, data)
        {
            //console.log("PopulateForm, All form data: " + JSON.stringify(data));

            $.each(data, function(key, value)   // all json fields ordered by name
            {
                //console.log("Data Element: " + key + " value: " + value );
                var $ctrls = $form.find('[name='+key+']');  //all form elements for a name. Multiple checkboxes can have the same name, but different values

                //console.log("Number found elements: " + $ctrls.length );

                if ($ctrls.is('select')) //special form types
                {
                    $('option', $ctrls).each(function() {
                        if (this.value == value)
                            this.selected = true;
                    });
                } 
                else if ($ctrls.is('textarea')) 
                {
                    $ctrls.val(value);
                } 
                else 
                {
                    switch($ctrls.attr("type"))   //input type
                    {
                        case "text":
                        case "hidden":
                            $ctrls.val(value);   
                            break;
                        case "radio":
                            if ($ctrls.length >= 1) 
                            {   
                                //console.log("$ctrls.length: " + $ctrls.length + " value.length: " + value.length);
                                $.each($ctrls,function(index)
                                {  // every individual element
                                    var elemValue = $(this).attr("value");
                                    var elemValueInData = singleVal = value;
                                    if(elemValue===value){
                                        $(this).prop('checked', true);
                                    }
                                    else{
                                        $(this).prop('checked', false);
                                    }
                                });
                            }
                            break;
                        case "checkbox":
                            if ($ctrls.length > 1) 
                            {   
                                //console.log("$ctrls.length: " + $ctrls.length + " value.length: " + value.length);
                                $.each($ctrls,function(index) // every individual element
                                {  
                                    var elemValue = $(this).attr("value");
                                    var elemValueInData = undefined;
                                    var singleVal;
                                    for (var i=0; i<value.length; i++){
                                        singleVal = value[i];
                                        console.log("singleVal : " + singleVal + " value[i][1]" +  value[i][1] );
                                        if (singleVal === elemValue){elemValueInData = singleVal};
                                    }

                                    if(elemValueInData){
                                        //console.log("TRUE elemValue: " + elemValue + " value: " + value);
                                        $(this).prop('checked', true);
                                        //$(this).prop('value', true);
                                    }
                                    else{
                                        //console.log("FALSE elemValue: " + elemValue + " value: " + value);
                                        $(this).prop('checked', false);
                                        //$(this).prop('value', false);
                                    }
                                });
                            }
                            else if($ctrls.length == 1)
                            {
                                $ctrl = $ctrls;
                                if(value) {$ctrl.prop('checked', true);}
                                else {$ctrl.prop('checked', false);}

                            }
                            break;
                    }  //switch input type
                }
            }) // all json fields
        }  // populate form

언급URL : https://stackoverflow.com/questions/7298364/using-jquery-and-json-to-populate-forms