如何通过Ajax请求将JSONP Server数据转换为HTML?

时间:2013-10-15 10:16:23

标签: php ajax json jsonp

我们很难将JSONP数据转换为HTML表格。

请查看此jsfiddle.net/pritpal21/6yqDV/

我们希望将服务器数据设置为新的HTML列表视图。

我们从PHP Server获取此JSONP数据,我们如何在HTML Source上设置它。

jQuery110201094877861905843_1381835431840(
{
"centres_info":
{
   "centre":
{
  "1":"BHOPAL ARERA COLONY",
  "2":"BHOPAL BAIRAGARH",
  "3":"BHOPAL CITY",
  "4":"BHOPAL KOTRA SULTANABAD", 
  "5":"BHOPAL SAKET NAGAR",
  "6":"BHOPAL IDGAH HILLS",
  "7":"BHOPAL GOVINDPURA",
  "8":"BHOPAL GULMOHAR COLONY",
  "9":"BHOPAL T.T.NAGAR",
  "10":"BHOPAL SONAGIRI",
  "11":"BHOPAL KOLAR ROAD"},
"address":
{
"1":"`Rajyoga Bhawan'\nE\/5, Arera Colony\nMain Road No. 3 \n stdcode:0755 \n phone:2463838, 2463719 \n fax:",
"2":"Shiv Shakti Dham', 165-B\nShanti Prakash Colony, One Tree Hill\nSant Hirdaram Nagar, Bairagarh \n stdcode:0755 \n phone: \n fax:",
"3":"'Durga Bhawan' 1st. Floor\nNew Sabzimandi\nKamali Mandir Road \n stdcode: \n phone: \n fax:",
"4":"A-15, Kamla Nagar\nKotra Sultanabad\n \n stdcode: \n phone: \n fax:",
"5":"62\/3A\/MIG\nSaketnagar\n \n stdcode:0755 \n phone: \n fax:",
"6":"Flat No. I-1\nMeenakshi Residency\nIdgah Hills \n stdcode:0755 \n phone:2545890 \n fax:",
"7":"15\/3, Old Subash Nagar\nOpp.Railway Gate(Govindpura)\n \n stdcode:0755 \n phone: \n fax:",
"8":"G-8\/380, Flat NO.1, Purvalava Apt.\nTrilochan Nagar\nGulmohar Colony \n stdcode:0755 \n phone:4232921 \n fax:",
"9":"34, New M.L.A., M.P. Colony\nNew Market, Jawahar Chowk\nT.T.Nagar \n stdcode:0755 \n phone:2778890 \n fax:",
"10":"50 M.I.G-  A Sector\nSonagiri Colony\n \n stdcode:755 \n phone:2756662 \n fax:",
"11":"B1- Golden Valley, \nBehind Sagar Complex\nKolar Road \n stdcode:0955 \n phone: \n fax:"}}})

我们希望将中心和地址列表数据放在One Div中,每个对都有两个跨度。

谢谢

1 个答案:

答案 0 :(得分:0)

  $.ajax({
             type: "GET",
             url: "http://www.dizainstore.com/chrome/info.php",
             async: true,
             data: "state="+ state+ "&city="+ city,
             dataType: 'jsonp',
              success: function(response) {
                  var centres=response.centres_info.centre;
                  var address=response.centres_info.address;
                  var val ;
                  var val1 ;

                        val += "<div class='box2-l'>" + cent + "</div><div class='box2-r'>" + address[i] + "</div>" ;


                         });
                      var new_val = "<div class='box1'><div class='box1-l'>Center List</div><div class='box1-r'>Address List</div>"+val+"</div>"
                  $(".result1").html(new_val);
                                       }

         });
         return false;
     });