使用ajax json响应更新html元素

时间:2013-11-03 08:52:53

标签: jquery ajax json

我使用此脚本根据带有json响应的ajax请求更新表格单元格。它没有更新指定的表格单元格。我的json字符串格式不正确吗?

$(document).ready(function() {

    $('select.swcomp').change(function () {
        var res_id = $(this).val();
        var index = $(this).data('index');

        $.ajax({
            type: 'POST',
            url:'http://skiweather.eu/v3/ajax/compare_snow.php',
            data: '{ "res_id":"' + res_id + '", "index":"' + index + '" }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (response) {
                $('#destin_' + index).html(response.resort);               
                $('#snowval_' + index).html(response.snow_valley);
                $('#snowmnt_' + index).html(response.snow_mountain);            
            }
        });
        return false;
    });

});

HTML

 <select name="resort_1" class="swcomp" data-index="1">
                    <option value="NoResort">resorts</option>
                    <option value="6">Adelboden</option>
                    <option value="237">Davos</option>
</select>

<table>
    <tr><td id="destin_1">res</td></tr>
    <tr><td id="snowval_1">val</td></tr>
    <tr><td id="snowmnt_1">mnt</td></tr>
</table>   

JSON

var response =[{"snow_valley":"40","snow_mountain":"40","resort":"Adelboden"}]

2 个答案:

答案 0 :(得分:2)

响应不是一个对象,它是一个数组,因此response.resort未定义它应该是response[0].resort

$('#destin_' + index).html(response[0].resort);               
$('#snowval_' + index).html(response[0].snow_valley);
$('#snowmnt_' + index).html(response[0].snow_mountain); 

答案 1 :(得分:0)

是的,你收到的json格式正确。如果你想要检查你的json farmatted正确遵循这个网站http://jsonlint.com/它将检查你的json验证。访问json数据http://jsontree.com/只需粘贴你的json并解析它将提供如何轻松访问数据