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

【问题标题】：How to use jQuery ajax in Google Chrome Extensions?如何在 Google Chrome 扩展中使用 jQuery ajax？
【发布时间】：2013-10-17 14:32:18
【问题描述】：

我已经写了一个通过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。所以请建议我。

谢谢

【问题讨论】：

标签： javascript jquery json xmlhttprequest

【解决方案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 );

    });

【讨论】：

【解决方案2】：

如果您想在 Chrome 扩展程序中进行跨域调用，则不必使用 JSONP。您可以简单地使用 Chrome 扩展程序跨域权限：http://developer.chrome.com/extensions/xhr.html

问候，乌迪

【讨论】：