html - 如何在html中显示Json数据到对话框

Question

我是 ajax、dom、jsonm 等 Web 应用程序的初学者。我的项目是使用 jquery UI 来解析 json 数据并显示数据库中的所有数据并通过 id 检索一个数据，它是创建、检索、更新和删除的一部分。所以检索是这里的关键功能。我可以毫无问题地获取所有数据并用所有数据填充数据表。

      "aoColumns" :[          
                    {"mData" : "image"},
                    {"mData" : "name"},
                    {"mData" : "type"},
                    {"mData" : "description"},
                    {"mData" : "price"},
                    {"mData" : "id",                       
                     "mRender" : function(data, type,full)
                                                  {return '<a href="#" id="'+ full.id +
                                                 '" class="id">Details</a>'; }
                     }

-->获取所有数据

var findById= function(id) { 
 console.log('findById: ' + id); 
  $.ajax({ 
       type:'GET', 
       url: rootUrl + '/' + id, 
       dataType: "json", 
       success: renderList
});
};   


var renderList = function(data){

           var list = data == null?[] : (data instanceof Array ? data : [ data ]);

            ///////////////////////////////////     
              solution1//////////////////////////////////////////////////
          $.each(list, function(index, pet){
              var row="<tr>" + "<td>" + pet.type + "</td>" 
                             + "<td>" + pet.price + "</td>" 
                             + "<td>" + pet.contact_no+ "</td>" 
                             + "<td> "+ pet.contact + "</td>" 
                     + "</tr>";
              //$(tblRow).appendTo("#entrydata tbody");
              $(row).appendTo('dialogTable tbody');
            });

检索更多详细信息

如果我通过检查元素单击“详细信息”链接，结果(在 xml 中)会显示此内容，

<pet>
<contact>bob.hoskins@lgfriday.com</contact>
<contact_no>5-(254)756-8567</contact_no>
<description>Great companion for up to 75 years</description>
<id>42</id>
<image>bird</image>
<name>Amazon</name>
<price>40</price>
<type>BIRDS</type>
</pet> 

(失败)净::ERR_CONNECTION_REFUSED

数据以 MediaType.APPLICATION_JSON、MediaType.APPLICATION_XML 形式返回，因此我可以轻松检查数据类型，但无法连接到它以在对话框中显示

<div id="dialog" title="More Information">
        <table id="dialogTable" style="width: 350px;">
            <thead>
                <tr id="findById">


                    <th>Type</th>
                    <th>Price</th>
                    <th>Contact</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

    </div>

Answer 1

我解决了这个问题。我设置了 var rooturl = http://localhost/xxx/rest/xxx"; 而不是 rooturl = "http://localhost:8080/xxx/rest/xxx" . 解决了跨源连接和连接失败的问题，现在可以渲染了。