用ajax獲取淘寶關鍵字接口

時間 2019-12-18

標籤 ajax 獲取淘寶關鍵字接口欄目 Ajax 简体版

原文原文鏈接

可定須要查看淘寶界面的結構，按F12查看網頁，此時先清除一下網頁中的數據，讓Network制空，隨後在輸入框中輸入新的內容，好比錢包，數據中會出現新的數據。點擊及查看藍色方框中的內容css

點擊以後，你能夠查看要訪問的地址，及響應的結果html

從第二步訪問到的路由地址，會是咱們調用的接口，以下圖；jquery

最後響應給咱們的結果就是第三步的內容，下面是我給的源碼：ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Pycharm/jq/1.5.2/jquery-1.5.2.min.js"></script>
</head>
<body>
<input type="text" value="">
<ul></ul>
<script>
    $(function () {
        $("input").keyup(function () {
            var $v = $(this).val();
            $.ajax({
                type:"post",
                url:"https://suggest.taobao.com/sug?code=utf-8&callback=jsonp392&k=1&area=c2c&bucketid=20",
                data:{
                    q:$v
                },
                async:false,
                dataType:"jsonp",
					success:function(res){
						console.log(res);
						$("ul").empty();
						$.each(res.result,function(i,v){
							var $li = $("<li>");
							console.log(i)
                            console.log(v)
							$li.html(v[0]);
							$li.appendTo($("ul"));
						})
					}
            })
        })
    })
</script>

</body>
</html>

說明：對於第二步，複製的請求地址：

https://suggest.taobao.com/sug?code=utf-8&q=qian&_ksTS=1517635754012_391&callback=jsonp392&k=1&area=c2c&bucketid=20中，在代碼中將&q=qian&_ksTS=1517635754012_391去除，應爲後續會用ajax繼續傳送ajax的值，json

而對於請求地址，也能夠這樣寫

url:"https://suggest.taobao.com/sug?code=utf-8&callback=?",

對於jsonp:

JSONP(json with Padding)是json的一種使用模式，可用於解決主流的瀏覽器跨域數據訪問的問題。（不支持post請求）跨域

核心：經過script標籤的src屬性，進行域名的包裝來完成跨域請求數據的而訪問，src來模擬數據的來源，經過和要訪問的服務器域名一致，進行同源數據的訪問，間接實現跨域數據的訪問瀏覽器

Json和jsonp的區別：

json是一種數據格式，jsonp是數據訪問的方式服務器

原生js跨域：原生js中，經過動態增長script標籤，指定src屬性進行數據的跨域訪問app

另加一個之前編寫的，這個不須要修改jq地址，jq是一個地址，能夠直接使用，以下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<style>
			input{
				width:400px;
				height: 40px;
			}
			ul{
				margin: 0;
				padding: 0;
				list-style: none;
				width: 400px;
			}
			ul li{
				height: 38px;
				width:100%;
				line-height: 38px;
				border-bottom:1px dotted #ccc;
			}
		</style>
	</head>
	<body>
		<!--https://suggest.taobao.com/sug?code=utf-8&q=aaa&callback=jsonp876-->
		<input type="text" value=""/>
		<ul>
		</ul>
	</body>
	<script>
		$(function(){
			$("input").keyup(function(){
				var $v = $(this).val();
				$.ajax({
					type:"post",
					url:"https://suggest.taobao.com/sug?code=utf-8&callback=?",
					async:true,
					data:{
						q:$v
					},
					dataType:"jsonp",
					success:function(res){
						console.log(res);
						$("ul").empty();
						$.each(res.result,function(i,v){
							var $li = $("<li>");
							console.log(i)
                            console.log(v)
							$li.html(v[0]);
							$li.appendTo($("ul"));
						})
					}
				});
			});
		});
	</script>
</html>

結果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。