跨域抓取360搜索結果

時間 2019-12-13

標籤抓取搜索結果简体版

原文原文鏈接

先來看效果，在搜索框中輸入想要搜索的內容，信息就會顯示在下方。html

如何把360搜索到的信息放入本身的網頁，涉及到了跨域請求。jquery

代碼分析：json

1.建立script元素.document.createElelment("script");跨域

2.設置script的src，這個src即爲360搜索的接口。script.src="https://sug.so.360.cn/suggest?callback=infoget&encodein=utf8&encodeout=utf8&format=json&fields=word&word="app

其中callback爲請求成功的回調函數，須要提早定義好。word=後跟着就想要請求的內容。函數

3.把這個script元素加入到document中。當把script加入到document時，就會去請求360的數據了。測試

4.返回的數據格式。ui

主要是用到result，其餘的在本次測試中沒有用到。spa

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        function infoget(data) {
           console.log(data.result[0].word);
        }
  
        $(function () {

 
        $("#btn").click(function () {
           
                var script = document.createElement("script");
                script.src = "https://sug.so.360.cn/suggest?callback=infoget&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=" + $("#txt").val();
                document.body.appendChild(script);
            });

        });
   
    </script>
</head>

<body>
    <input type="text" id="txt" style="width:500px">
    <input type="button" value="肯定" id="btn">
    <div style="width:500px"></div>
</body>

</html>

相關標籤/搜索

每日一句

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