javascript 변경 jquery를 사용하여 양식을 JSON 데이터로 다시 채 웁니다.




jquery.attr data (3)

data [0]에 필드의 이름이 포함되고 data [1]에 값이 있으면 다음을 수행 할 수 있습니다.

텍스트 상자에 대해 다음과 같이 할 수 있습니다.

$("[name="+data[0]+"]").val(data[1]);

다음과 같이 선택합니다.

$("[name="+data[0]+"]").val(data[1]);

체크 박스와 라디오 버튼은 체크 된 경우에만 직렬화됩니다.

그래서 체크 박스 (jQuery 1.6+ 이전)와 같은 것 :

$("[name="+data[0]+"]").attr('checked','checked');

라디오 버튼은 다른 것들을 구별하는 방법에 따라 약간의 추가 작업이 필요할 수 있습니다. (IE ID, 값 등 ..)

나는 HTML 폼을 가지고 있는데, 아약스를 통해 데이터베이스에 저장한다. 키 / 값 쌍의 쿼리 문자열을 얻으려면 다음과 같이 매우 편리한 serialize 함수를 사용했습니다.

var myData = $("form#form_id").serialize();
$.ajax({
    url: "my_save_script.php",
    type: "post",
    data: myData,
    success: function(msg){
        alert(msg);
    }
});

이제 빈 양식을로드하고 JSON 문자열로 ajax 호출에서 전달되는 데이터베이스의 데이터로 다시 채 웁니다. 나는 다음과 같이 올바른 키 / 값 쌍을 가진 Javascript 객체를 얻을 수 있었다.

data = $.parseJSON(data);
data = data[0];

양식을 다시 채우는 가장 단순하고 가장 우아한 방법은 무엇입니까?

양식의 입력 요소는 텍스트, 선택, 체크 상자 및 라디오입니다. 입력 요소의 이름은 데이터베이스 열의 이름과 동일하며 위 data 오브젝트의 키 / 값 쌍의 키입니다. 이것이 serialize 함수가 나를 위해 잘 작동하는 이유이다.


가장 쉬운 방법은이 라인을 따라 뭔가 될 것이라고 :

// reset form values from json object
$.each(data, function(name, val){
    var $el = $('[name="'+name+'"]'),
        type = $el.attr('type');

    switch(type){
        case 'checkbox':
            $el.attr('checked', 'checked');
            break;
        case 'radio':
            $el.filter('[value="'+val+'"]').attr('checked', 'checked');
            break;
        default:
            $el.val(val);
    }
});

기본적으로 이상한 유일한 것들은 체크 박스와 라디오입니다. 체크 된 속성을 가지고 있어야하기 때문입니다. 라디오는 체크 박스보다 좀 더 복잡하기 때문에 체크 할 필요가있을뿐만 아니라 값을 사용하여 체크 할 올바른 하나를 찾아야하기 때문에 라디오는 체크 박스보다 조금 복잡합니다. 다른 모든 것들 (input, textareas, selectboxes 등)은 JSON 객체에 반환되는 값으로 설정되어야합니다.

jsfiddle : http://jsfiddle.net/2xdkt/


아약스 요청을하는 방식을 변경하는 것이 좋습니다. .post () 사용

$.post("my_save_script.php", {
         data: myData,
    }, function(data) {
        $.each(data, function(i, item){
            $("#"+item.field).val(item.value);
        });      
    }, 
"json");




populate