如何在每个选项卡中显示使用ajax获取的json数据

我有一个struts 2 action类，它有一个返回json数据的方法

我的jsp上有8个选项卡。当用户单击选项卡时，我想对该方法进行ajax调用。我希望返回的json数据能够被解析并用html修饰，可以在这个选项卡中呈现

我正在使用jquery选项卡来创建

• 如何捕获返回的json数据？我可以订阅jquery发布的一些事件吗
• 如何处理返回的json数据？例如：。；json数据：

{City:{name=“New York”，alias=“NY”，imgPath=“filePath/img1.jgp”}

我想提取名称并加粗。

---

使用imgPath定义img标记等，您可以通过将数据参数传递给ajax calls success回调方法来捕获返回的Json数据，该方法将在成功时执行

您可以使用

jqueryparse.json

方法并将json字符串传递给它

还有一件事，您的示例json字符串看起来不是有效的。只需粘贴json数据或粘贴url，即可从此链接检查json是否有效。

$（document）.ready（函数（）{
 $(document).ready(function () {
            var data = { "City": [{ "name": "New York1", "alias": "NY1", "imgPath": "filePath/img1.jgp" }, { "name": "New York2", "alias": "NY2", "imgPath": "filePath/img2.jgp" }, { "name": "New York3", "alias": "NY3", "imgPath": "filePath/img3.jgp" }, { "name": "New York4", "alias": "NY4", "imgPath": "filePath/img4.jgp"}] };

            if (data.City.length > 0) {
                $('body').prepend('<div id="tabs1"><ul></ul></div>');

                $.each(data.City, function (i, entity) {
                    $('#tabs1 ul').append($('<li><a href="#tabs1-' + (i + 1) + '">' + entity.name + '</a></li>'));
                    $('#tabs1').append('<div id="tabs1-' + (i + 1) + '"><p>Image Path:' + entity.imgPath + '</p></div>');
                });

                $("#tabs1").tabs();
            }
        });​

变量数据={“城市”：[{“名称”：“纽约1”，“别名”：“NY1”，“imgPath”：“文件路径/img1.jgp”}，{“名称”：“纽约2”，“别名”：“NY2”，“imgPath”：“文件路径/img2.jgp”}，{“名称”：“纽约3”，“别名”：“NY3”，“imgPath”：“文件路径/img3.jgp”}，{“名称”：“纽约4”，“imgPath”：“文件路径/img4.jgp”}；
如果（data.City.length>0）{
$（'body'）。前置（'ul>'）；
$.each（data.City，function（i，entity）{
$（'tabs1ul'）。追加（$（'li>'）；
$（'#tabs1'）。追加（'图像路径：'+entity.imgPath+'
'）；
});
$（“#tabs1”）.tabs（）；
}
});​

---

对于实时演示，请参见以下链接：

首先，您需要使用json数据动态创建ul>li结构。然后清空旧的div addnewul>li并再次调用bind以获取选项卡。