jQuery 从 json 填充表单

Question

我显然错过了一些关于 jquery 的内容...我正在尝试填充 jQueryUI 对话框内的表单。 我很好地获取了 JSON 数据，但它让我无法理解如何引用数据并设置表单字段的值...

您将在下面看到三种尝试 - 最后一种是几乎每个人都说要使用的一种 - 但表格仍然是空白... 我错过了什么？？？？

$( '#companies' ).on( 'click', '.uLink' , function( event ) {
    // set ID
    var xid = $( this ).data( 'identity' );
    // get record
    $.ajax({
        type: 'POST',
        url: 'm/company_edit.php',
        dataType: 'json',
        data: { id: xid },
        success: function ( data ) {
            // display dialog
            $( '#company-form-container' ).dialog( 'open' );

            /* ATTEMPT #1 - with a variant on 'name' - form remains blank
            // populate form
            $( '#companyid' ).val( value.id );
            $( '#name' ).val( 'test' + value.name );
            $( '#address1' ).val( value.address1 );
            $( '#address2' ).val( value.address2 );
            $( '#city' ).val( value.city );
            $( '#state' ).val( value.state );
            $( '#postalcode' ).val( value.postalcode );
            $( '#phone' ).val( value.phone );
            $( '#contact' ).val( value.contat );
            $( '#email' ).val( value.email );
            */

            /* ATTEMPT #2 - supposed to make some accommodation for field type...
                            Make assumption that fields are named same as JSON fields, and the you only
                            want to use the data value in that one spot...*/
                           /*
            var frm = '#company-form';
            $.each(data, function( key, value ){
                var $ctrl = $( '[name='+key+']', frm );
                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;  
                }  
            });  
            */

            // attempt 3 - still no go
            $.each( data, function( key, value ) {
                $( '#' + key ).val( value ); 
               });

/* //下面建议的尝试 - 没有更改... var c = jQuery.parseJSON( 数据 );

            // populate form
            $( '#companyid' ).val( c.id );
            $( '#name' ).val( c.name );

*/

        },

        error: function () {    
            // there's an error
            $( '#message' ).html( '<p>There was a problem on the server... </p>' );
            $( '#message' ).removeClass( 'hidden' ).addClass( 'message' );
        }
    });

    return false;
});

JSON 数据示例

[{"id":"3", "name":"Sub Customer B", "address1":"232 road", "address2":"", "city":"Galatan ", "state":"TN", "phone":"", "email":""}]

这是 HTML 表单

<!-- the form -->
<div id="company-form-container" title="Create New Company">
<p class="validateTips">* fields are required.</p> 
<form id="company-form" >
<fieldset>

    <input type="hidden" name="customer_id" id="customer_id" value="" />

    <label for="name">name<sup>*</sup> <span class="fieldhint"></span></label> <br/>
    <input type="text" name="name" id="name" 
           size="50" maxlength="100" class="text ui-widget-content ui-corner-all" /><br/>

    <label for="address1">address1 <span class="fieldhint"></span></label> <br/>
    <input type="text" name="address1" id="address1" 
           size="20" maxlength="100" class="text ui-widget-content ui-corner-all" /><br/>

    <label for="address2">address2 <span class="fieldhint"></span></label> <br/>
    <input type="text" name="address2" id="address2" 
           size="10" maxlength="50" class="text ui-widget-content ui-corner-all" /><br/>

    <label for="city">city <span class="fieldhint"></span></label> <br/>
    <input type="text" name="city" id="city" 
           size="20" maxlength="50" class="text ui-widget-content ui-corner-all" /><br/>

    <label for="state">state <span class="fieldhint"></span></label> <br/>
    <input type="text" name="state" id="state" 
           size="5" maxlength="3" class="text ui-widget-content ui-corner-all" /><br/>

    <label for="postalcode">postal code <span class="fieldhint"></span></label> <br/>
    <input type="text" name="postalcode" id="postalcode" 
           size="20" maxlength="15" class="text ui-widget-content ui-corner-all" /><br/>

    <label for="phone">phone <span class="fieldhint"></span></label> <br/>
    <input type="text" name="phone" id="phone" 
           size="20" maxlength="20" class="text ui-widget-content ui-corner-all" /><br/>

    <label for="contact">contact <span class="fieldhint"></span></label> <br/>
    <input type="text" name="contact" id="contact" 
           size="20" maxlength="50" class="text ui-widget-content ui-corner-all" /><br/>

    <label for="email">email <span class="fieldhint"></span></label> <br/>
    <input type="text" name="email" id="email" 
           size="20" maxlength="100" class="text ui-widget-content ui-corner-all" /><br/>

</fieldset>
</form>

Answer 1

短视编码...由太多小事情导致...

问题是表单有一个字段“customer_id”，但 JSON 正在提供“id”...

$.each( data, function( key, value ) {
    $( '#' + key ).val( value ); 
});

一旦我更正了这个错误，这个代码确实起作用了——当然，我必须将其分成一个单独的页面并隔离每个步骤才能看到这一点——但是它给了我更好的洞察力。

感谢帮助