<script type="text/javascript" src="http://www.google.com/jsapi?key=asedAWWefefI-43WqNAiw0XkfflwpU9zqkg">
</script>
<script type="text/javascript">
google.load("jquery", "1.6.1");
</script><script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
google.setOnLoadCallback(function()
{...
}....
私のコードが機能しないのは、上記のコードのせいだと思います。
コード全体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=AIzaSyDzbTUhnU2I-erwerwe3450XkfflwpU9zqkg">
</script>
<script type="text/javascript">
google.load("jquery", "1.6.1");
</script><script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
google.setOnLoadCallback(function()
{
$(function()
{
$('#catalog').click(function(e)
{
e.preventDefault();
$.getJSON('books.php', function(data) {
var book = "<h3>" + data.title + </h3>";
book += "<p>ISBN: " + data.isbn + "</p>";
book += "<br/>Published Date: " + data.publishDate;
book += "<br/>Publisher: " + data.publisher;
var author = [];
$.each(data.authors, function(i, ov) {
authors.push(ov.name)
});
book += "<br/>Authors: " + authors.join(", ");
$('#resopnse').html(book);
});
});
});
});
</script>
</head>
<body>
<p><a id="catalog" href="">Retrieve book information</a></p>
<div id="response"></div>
</body>
</html>
リンクをクリックしても何も表示されません.json出力を持つようにフォーマットされた配列を持つbooks.phpファイルが既にあります。
アップデート
$.getJSON('books.php', function(data)
{
var book = "<h3>" + data.title + "</h3>";
book += "<p>ISBN: " + data.isbn + "</p>";
book += "<br/>Published Date: " + data.publishDate;
book += "<br/>Publisher: " + data.publisher;
var author = [];
$.each(data.authors, function(i, ov) { authors.push(ov.name) });
book += "<br/>Authors: " + authors.join(", ");
$('#response').html(book);
});
この関数は内部では到達できません。