2014-03-05 48 views
0

創建列表我有一個休息的服務,讓我下面的JSON失敗的jQuery Mobile的

[ 
    { 
     "vendorId":1, 
     "product":[ 
     { 
      "productId":1, 
      "name":"Coffee", 
      "baseprice":2.00, 
      "productoption":[ 
       { 
        "productOptionId":1, 
        "topping":"honeymustard", 
        "baseprice":0.30 
       }, 
       { 
        "productOptionId":2, 
        "topping":"barbeque", 
        "baseprice":0.50 
       }, 
       { 
        "productOptionId":3, 
        "topping":"whipcream", 
        "baseprice":0.50 
       } 
      ], 
      "productSubOption":[ 
       { 
        "productSubOptionId":1, 
        "size":"Small", 
        "baseprice":0.50 
       }, 
       { 
        "productSubOptionId":2, 
        "size":"Medium", 
        "baseprice":0.50 
       }, 
       { 
        "productSubOptionId":3, 
        "size":"Large", 
        "baseprice":0.50 
       } 
      ] 
     }, 
     { 
      "productId":2, 
      "name":"Burger", 
      "baseprice":2.00, 
      "productoption":[ 
       { 
        "productOptionId":4, 
        "topping":"mayo", 
        "baseprice":0.50 
       }, 
       { 
        "productOptionId":5, 
        "topping":"onion", 
        "baseprice":0.50 
       } 
      ], 
      "productSubOption":[ 
       { 
        "productSubOptionId":4, 
        "size":"Small", 
        "baseprice":0.50 
       }, 
       { 
        "productSubOptionId":5, 
        "size":"Medium", 
        "baseprice":0.50 
       } 
      ] 
     } 
     ], 
     "vendorName":"XYZ", 
    } 
] 

我想告訴賣主的名字的列表,當我打開我的手機應用程序。 這是我寫的..

<body> 
    <div data-role="page" id="vendors"> 

     <div data-role="header"> 
      <h1>Oc Welcome</h1> 
     </div> 

     <div data-role="content"> 
      <ul data-role="listview" id="vendors-list" data-divider-theme="b" data-inset="true"></ul> 
     </div> 

     <div data-role="footer"> 
      <h4>orderchief.com</h4> 
     </div> 
    </div> 
</body> 

<script> 
$('#vendors').live("pageshow",function(){ 
    $.getJSON('http://192.168.1.2:8080/server/getVendors' , function(data){ 
     var list = ""; 
     $.each(data, function(key, value){ 
      list += '<li class="row">'+value.vendorName+'</li>'; 
     }); 
     $('#vendors-list').html(list).trigger('create'); 
     $('#vendors-list').listview('refresh'); 
    }) 
} 

</script> 

我已經通過其他職位看了,但我是新來的jQuery所以很難理解的解決方案。我錯過了什麼嗎?當我用chrome打開這個頁面時,頁面的內容部分看起來是空的。我打算在下一步中使用它。我將不得不做出一些改變嗎?

+0

您正在使用哪個版本? – Omar

+0

什麼版本.. jquery是1.2.0 – Nikhil

+0

你的意思是這樣的? http://jsfiddle.net/Palestinian/7WH2L/ – Omar

回答

0

經過兩天的頭撞和頭髮拉扯我終於找到了我得到一個空列表的原因。

這與CORS有關。你有你的過濾器類添加到網頁 -

這些職位如果你不使用@EnableAutoConfiguration(彈簧啓動自動配置功能,不需要web.xml中)幫助 https://spring.io/guides/gs/rest-service-cors/

http://zhentao-li.blogspot.ca/2012/06/enable-cors-support-in-rest-services.html

.xml手動如下

<filter> 
    <filter-name>cors</filter-name> 
    <filter-class>com.zhentao.CorsFilter</filter-class> 
</filter> 
<filter-mapping> 
    <filter-name>cors</filter-name> 
    <url-pattern>/*</url-pattern> 
</filter-mapping>