Jquery。ajax 的应用，引入json

最新推荐文章于 2024-09-09 16:08:27 发布

原创最新推荐文章于 2024-09-09 16:08:27 发布 · 488 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用jQuery和Ajax调用豆瓣图书搜索API的HTML示例，演示了如何通过用户输入搜索图书，并显示图书的图片、出版社及价格等信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="ajax.js"></script>
</head>
<body>
<input type="text" placeholder="输入框" id="shuru" style="position:absolute">//输入搜索的内容
<button id="b01" type="button" style="position:absolute;left: 150px">点击</button>//点击开始搜索
<img src="" alt="" id="img" style="margin-top: 20px">//搜索到的图片放入image
<div id="cbs"></div>//搜索到的出版社放入这里
<div id="jg" style="font-size: 25px;font-weight: bold;"></div>//搜索到的价格放入这里
</body>


<script>
    jQuery(document).ready(function(){  //jquery的预加载方式
        $("#b01").on("click",function () {     //取到按钮点击
            $.ajax({
                methods: "get",   //获取方式为GET
                url: "https://api.douban.com/v2/book/search?cont>=0",//json的地址
                dataType: "jsonp",  //如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。
                jsonp: "callback",//服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。
                data:{//下面是json的获取方式  各不相同
                    q:$("#shuru").val(),
                    count:5   //展示获取的条目数
                },
                success: function(json){  //获取成功执行function
//                    for(let i=0;i<json.books.length;i++){
//                        document.getElementById("img").value+=json.books[i].author_intro;
//                    }

                    $("#img").attr("src",json.books[0].image);  //获取到的json的image
                    $("#cbs").html(json.books[0].publisher);//获取到的json的publisher
                    $("#jg").html(json.books[0].price);//获取到的json的price
                    console.log(json.books);  //打印json
                },
                error: function(){  //获取失败时执行这个function
                    alert('404');
                }
            });
        })

    });
</script>
</html>

下面是一些相关属性的解释：

jquery api的解释：

通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。

其中，text和xml类型返回的数据不会经过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给success回调函数，

'''注意'''，我们必须确保网页服务器报告的MIME类型与我们选择的dataType所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。

如果指定为html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的，指定script类型的话，也会先执行服务器端生成JavaScript，然后再把脚本作为一个文本数据返回。

如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，他首先尝试使用JSON.parse()。如果浏览器不支持，则使用一个函数来构建。JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。