Question

我正在尝试访问Google图书以获取ISBN代码来获取图书的详细信息，我有很多问题，其中包括：

A）我正在尝试组装脚本请求，例如将ISBN代码连接到URL中。我没有成功地做到这一点 - 我不知道为什么。

B）然后我想用动态生成的脚本更新DOM中的div，然后执行它。

C）我发现返回数据的格式和Google响应中包含的函数调用的参数名称有点困惑。

是否有其他人遇到过相同的问题，可以提供上述A至A的指导。

我在下面附上JavaScript代码。

        $(document).ready(function() {

            $('#viewbook-button').live('click', function() {
              isbnCode = this.text;

              alert("ISBN is : " + isbnCode + " " + this.text + " as well");

              alert("Getting JSONP Google Books data");

              isbnCode = "0451526538";

              JSONPstr = '<' + 'script ' + 'src="' + 'https://www.googleapis.com/books/v1/volumes?q=ISBN' + isbnCode; 
              JSONPstr = JSONPstr + '&callback=handleJSONPResponse">' + '</script>';

              alert("un-Escaped JSONP string" + JSONPstr);

              escJSONPstr = escape( escJSONPstr );

              alert("Escaped JSONP string");

              //divstr = "";
              //divstr = divstr + escape(<script src=");
              //divstr = divstr + encodeURIComponent(https://www.googleapis.com/books/v1/volumes?q=ISBN); 
              //divstr = divstr + escape(isbnCode);
              //divstr = divstr + encodeURIComponent(&callback=handleJSONPResponse);
              //divstr = divstr + escape("></);
              //divstr = divstr + escape(script);
              //divstr = divstr + escape(>);


              $('#jsonp-call').html(escJSONPstr);

              // This will cause the handleJSONPResponse function to execute when the script is dynamically loadedinto div.
              // The data wrapped in a function call will be returned from the Google Books server.
              // This will cause the handleJSONPResponse function to execute below.

            });   // end viewbook-button
        });       // end document.ready

        function handleJSONPResponse(response) {
          var tmp = response;
          alert(tmp);

        };

  </script>


  </head>

  <body> 
    <h2>Show Details of Books Ordered by a Customer</h2>
    <a href="#" id="getcusts-button">Get Customer Details</a>
    <br/><br/>
    <div id="tablist">Tables will be Listed Here</div>
    <br/><br/>
    <div id="Google-call">The JSONP generated src= statement will go here and execute</div>

  </body>
</html>

编辑：

问题解决了 - 谢谢大家。

Answer 1

你正在重新发明轮子：jQuery内置了JSONP支持，所以你不需要自己实现它。使用$.ajax方法：

$.ajax({
    url: 'https://www.googleapis.com/books/v1/volumes?q=ISBN' + isbnCode,
    dataType: 'jsonp',
    success: function(response) {
        console.log(response);  // log the response object to the console
    }
});

这应该是你需要做的全部。

编码JSONP

1 个答案: