jQuery從json填充表單

Question

我顯然錯過了關於jquery的一些內容......我正在嘗試填充jQueryUI對話框中的表單。 我收到的JSON數據很好，但它讓我無法引用數據並設置表單字段的值...

你會看到下面的三個嘗試 - 最后一個是幾乎每個人都說要使用的 - 但形式仍然是BLANK ...我錯過了什么?????

$( '#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（data）;

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

這個代碼確實有效，一旦我糾正了這個錯誤 - 當然我不得不把它分解成一個單獨的頁面並隔離每一步以便看到 - 但是它給了我更好的洞察力。

謝謝你的幫助

Answer 2

成功函數將json數據返回到'data'變量，而在第3次嘗試中使用'result'變量。

因此，將“成功：功能（數據）”行更改為“成功：功能（結果）”可能會解決您的問題。

編輯

檢查使用，

var c = jQuery.parseJSON( data );
$( '#companyid' ).val( c['id'] );
$( '#name' ).val( c['name'] );

Answer 3

使用jQuery.parseJSON（）解碼方法1中的json編碼數據。確保從company_edit.php發送json編碼數據

供你參考

我想如果你可以使用一個Javascript模板引擎來完成這個技巧，那將是完美的。 使用方法一嘗試其中之一。

使用JSON的好Javascript模板引擎

JSON模板引擎

你推薦什么Javascript模板引擎？

http://www.jquery4u.com/javascript/10-javascript-jquery-templates-engines/

Answer 4

您可以使用https://github.com/corinis/jsForm用json填充表單字段（並再次返回）