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

时间:2014-06-20 10:33:34

标签: html mysql ajax json datatable

我是web应用程序中ajax,dom,jsonm等的初学者。我的项目是使用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>'; }
                     }

- &gt;获取所有数据

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>

1 个答案:

答案 0 :(得分:0)

我解决了这个问题。我设置了var rooturl = http://localhost/xxx/rest/xxx";而不是rooturl = "http://localhost:8080/xxx/rest/xxx"。它解决了交叉原点连接和连接失败问题,现在它呈现。