print - return json javascript

Use jquery para rellenar el formulario con datos JSON

Question

Tengo un formulario HTML que guardo en la base de datos a través de ajax. Para obtener la cadena de consulta de los pares clave / valor, he usado la muy conveniente función de serialize , como esta:

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

Ahora quiero cargar un formulario en blanco y volver a llenarlo con los datos de la base de datos, que se entrega desde una llamada ajax como una cadena JSON. He podido obtener un objeto de Javascript con los pares clave / valor correctos como este:

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

¿Cuál es la forma más sencilla y elegante de rellenar el formulario?

tenga en cuenta que los elementos de entrada del formulario son texto, selección, casilla de verificación y radio. Los nombres de los elementos de entrada son los mismos que los nombres de las columnas de la base de datos, y son las claves de los pares clave / valor en el objeto de data anterior. Esta es la razón por la que la función de serialize funciona tan bien para mí.

Answer 1

Le sugiero que cambie la forma en que está haciendo una solicitud ajax. Utilice .post ()

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

Answer 2

Si los datos [0] contienen el nombre del campo y los datos [1] contienen el valor, puede hacer lo siguiente:

Puedes hacer algo como esto para cuadros de texto:

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

Entonces algo como esto para selecciones:

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

Tenga en cuenta que las casillas de verificación y los botones de radio solo se serializan si están marcados.

Así que algo como esto para las casillas de verificación (antes de jQuery 1.6+):

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

El botón de opción puede necesitar algún trabajo adicional dependiendo de cómo se diferencian entre los diferentes. (ID de IE, valor, etc.)

Answer 3

Yo diría que la forma más fácil sería algo como esta:

// 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);
    }
});

Básicamente, los únicos que son extraños son las casillas de verificación y las radios porque necesitan tener su propiedad verificada, bueno, verificada . Las radios son un poco más complejas que las casillas de verificación porque no solo necesitamos verificarlas, sino que necesitamos encontrar la ONE correcta para verificar (usando el valor). Todo lo demás (entradas, áreas de texto, cuadros de selección, etc.) debe tener su valor establecido en el que se devuelve en el objeto JSON.

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