JSON响应转换为输入值

I have the following code which returns a JSON array. I'm having issues putting the values into HTML inputs:

$('#button-validate').live('click', function() {
    $.ajax({
        url: 'index.php?route=sale/customer/addressValidation&token=<?php echo $token; ?>',
        type: 'post',
        dataType: 'html',
        data: 'shipping_address_1=' + encodeURIComponent($('input[name=\'address[1][address_1]\']').val()) + '&shipping_address_2=' + encodeURIComponent($('input[name=\'address[1][address_2]\']').val()) + '&shipping_city=' + encodeURIComponent($('input[name=\'address[1][city]\']').val()) + '&shipping_region=' + encodeURIComponent($('select[name=\'address[1][zone_id]\']').val()) + '&shipping_zip=' +  encodeURIComponent($('input[name=\'address[1][postcode]\']').val()),
        beforeSend: function() {
            $('.success, .warning').remove();
            $('#button-history').attr('disabled', true);
            $('#history').prepend('<div class="attention"><img src="view/image/loading.gif" alt="" /> Validating</div>');
        },
        complete: function() {
            $('#button-history').attr('disabled', false);
            $('.attention').remove();
        },
        success: function(data) {
            if (data['error']) {
                $('div#warning').attr('display', false);
                $('div#warning').after('<div class="warning" style="display: none;">' + json['error'] + '</div>');

            }else{
            $('#shipping_address_1').val(html['shipping_address_1']);
            $('#shipping_address_2').val(html['shipping_address_2']);
            $('#shipping_city').val(html['shipping_city']);
            $('#shipping_zip').val(html['shipping_zip']);
            }
        }
    });
});

The JSON array looks like this in Firebug:

[{"shipping_address_1":"21497 CROZIER AVE","shipping_address_2":"","shipping_city":"BOCA RATON","shipping_region":"FL","shipping_zip":"33428"}]

To access shipping_address_1 do:

data[0].shipping_address_1  OR data[0]["shipping_address_1"] ;

Also, what is html['shipping_address_1']? Your JSON object is in data and not in a HTML var here. Try this:

$('#shipping_address_1').val(data[0]["shipping_address_1"]);
$('#shipping_address_2').val(data[0]["shipping_address_2"]);
$('#shipping_city').val(data[0]["shipping_city"]);
$('#shipping_zip').val(data[0]["shipping_zip"]);

First, it doesn't return a JSON object, as you defined here:

dataType: 'html',

change that to:

dataType: 'json',

Second, you're mixing up your result object all over the place:

success: function(data) {

All of your interactions should be data.something and you use json['arr'] here and html['string'] there.

Start by correcting those and then see if it is clear how to proceed. If not, I can update this answer.

You can use dot notation or bracket to access to the information:

With dot notation:

data[0].shipping_address_1

With bracket notation:

data[0]['shipping_address_1']

I suggest to use dot notation when possible, but if you are going to iterate over a fixed number of values I suggest using the second approach:

for(var i=1; i<6; i++) {
    $('#shipping_address_' + i).val(data[0]["shipping_address_"+ i ]);   
}

Remember: Dot notation is faster to write and also easy to read. On the other hand, the square bracket notation allows access to properties containing special characters and the selection of properties using variables, like the example presents above.