如何在Google Chrome扩展中使用jQuery ajax？

Question

我已经写了代码从通过JSONP调用（基于jQuery）请看看下面的代码的另一台服务器获取数据....

$("#submit").click(function() { 
var state=$("#state").val(); 
var city=$("#city").val(); 
     $.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 ; 
        var und 
        $.each(centres, function(i,cent){ 
      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; 
    }); 

它的工作对我罚款。但是当我在Google Chrome扩展中使用它时，它不起作用，发生错误： - 我们无法使用jQuery Ajax调用，他们建议使用xmlhttprequest。但我不知道如何将此代码转换为XMLhttpRequest。所以请建议我。

感谢

Answer 1

因为回报是JSONP，看来dizainstore使用一个RESTful API和希望你使用JSONP与脚本注入：

http://en.wikipedia.org/wiki/JSONP#Script_element_injection

您的代码反而会是这个样子：

function handleDizain(response) 
{ 
    var centres=response.centres_info.centre; 
    var address=response.centres_info.address; 
    var val ; 
    var val1 ; 
    var und 
    $.each(centres, function(i,cent){ 
      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); 
} 

$("#submit").click(function() { 
     var state=$("#state").val(); 
     var city=$("#city").val(); 

     //Create a new script tag 
     var loader = document.createElement("script"); 
     loader.setAttribute("type", "text/javascript"); 

     //Set the source 
     loader.src = "http://www.dizainstore.com/chrome/info.php?state=" + state + "&city=" + city + "&callback=handleDizain"; 

     //Add it to the body 
     document.body.appendChild(loader); 

    }); 

Answer 2

如果您希望在Chrome扩展程序中进行跨源来电，则不必使用JSON P.你可以简单地使用Chrome扩展跨域权限：http://developer.chrome.com/extensions/xhr.html

问候， 乌迪