2

I am attempting to access Google Books in order to an ISBN Code to get details of a book, I have a number of problem, which are:

A) I am trying to assemble a script request e.g. with the ISBN code concatenated into the URL. I have not managed to do this successfully - and I don't know why.

B) I then want to update a div in the DOM with this generated script dynamically, such that it will then execute.

C) I am finding it a bit of a puzzle as to the format of the returned data and the argument name of the function call contained in the Google response.

Has anyone else encountered the same problem and can offer guidance re A thru C above.

I enclose JavaScript code below.

        $(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>

EDIT:

Problem solved - thanks everyone.

4

1 回答 1

2

您正在重新发明轮子: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
    }
});

这应该是你需要做的所有事情。

于 2011-12-20T15:09:47.147 回答