avascript怎麼獲取指定url網頁中的內容

目錄

 

• 1、總結
  • 一句話總結：推薦jquery中ajax，簡單方便。
  • 一、js能跨域操做麼？
• 2、用php獲取
• 3、jquery中ajax獲取
• 4、經過node.js獲取

 

回到頂部

>  1、總結（點擊顯示或隱藏總結內容）

一句話總結：推薦jquery中ajax，簡單方便。

 

一、js能跨域操做麼？

javascript出於安全機制不容許跨域操做的。

 

 

回到頂部

2、用php獲取

javascript出於安全機制不容許跨域操做的。所以不能抓取其餘網站的內容。
可使用php中的
echo file_get_contents("網址");

也可使用curl
$ch=curl_init();
curl_setopt($ch,CURLOPT_URL,"網址");
curl_setopt($ch,CURLOPT_HEADER,0);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
echo $data=curl_exec($ch);
curl_close($ch);

 

回到頂部

3、jquery中ajax獲取

用ajax。

引入jquery的話，

1 2 3

$( "button" ).click( function (){     $( "div" ).load( 'test.html' ); });

若是你要獲取這個頁面某個id或者類的html還能夠這麼寫

1 2 3

$( "button" ).click( function (){     $( "div" ).load( 'test.html #container' ); });

 這個能夠直接把新頁面的html元素加載到指定的div或者別的元素裏面。

若是你要純代碼的話，那再獲取這個div的html就能夠了。

1	$( "div" ).html();

 

 

回到頂部

4、經過node.js獲取

之前一直據說有爬蟲這種東西，稍微看了看資料，貌似不是太複雜。

正好了解過node.js，那就基於它來個簡單的爬蟲。

 

1.本次爬蟲目標：

從拉鉤招聘網站中找出「前端開發」這一類崗位的信息，並做相應頁面分析，提取出特定的幾個部分如崗位名稱、崗位薪資、崗位所屬公司、崗位發佈日期等。並將抓取到的這些信息，展示出來。

 

初始拉鉤網站上界面信息以下：

 

2.設計方案：

爬蟲，實際上就是經過相應的技術，抓取頁面上特定的信息。

這裏主要抓取上圖所示崗位列表部分相關的具體崗位信息。

首先，抓取，就得先有地址url:

http://www.lagou.com/jobs/list_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91?kd=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91&spc=1&pl=&gj=&xl=&yx=&gx=&st=&labelWords=label&lc=&workAddress=&city=%E5%85%A8%E5%9B%BD&requestId=&pn=1

這個連接就是崗位列表的第一頁的網頁地址。

咱們經過對地址的參數部分進行分析，先無論其餘選擇的參數，只看最後的參數值：pn=1

咱們的目的是經過page來各個抓取，因此設置爲pn = page;

其次，爬蟲要獲取特定信息，就須要特定表明的標識符。

這裏採用分析頁面代碼標籤值、class值、id值來考慮。

經過Firebug對這一小部分審查元素

分析得出將要獲取哪些信息則須要對特定的標識符進行處理。

 

3.代碼編寫：

按照預約的方案，考慮到node.js的使用狀況，經過其內置http模塊進行頁面信息的獲取，另外再經過cheerio.js模塊對DOM的分析，進而轉化爲json格式的數據，控制檯直接輸出或者再次將json數據傳送回瀏覽器端顯示出來。

（cheerio.js這東西的用法很簡單，詳情能夠自行搜索一下。其中最主要的也就下邊這份代碼了，其他的跟jQuery的用法差很少。

就是先將頁面的數據load進來造成一個特定的數據格式，而後經過相似jq的語法，對數據進行解析處理）

var cheerio = require('cheerio'),
    $ = cheerio.load('<h2 class="title">Hello world</h2>');

$('h2.title').text('Hello there!');
$('h2').addClass('welcome');

$.html();
//=> <h2 class="title welcome">Hello there!</h2>

 

採用express模塊化開發，按要求創建好項目後。進入項目目錄，執行npm install安裝所需依賴包。若是還不瞭解express的能夠  到這裏看看

爬蟲須要cheerio.js 因此另外require進來， 因此要另外  npm install cheerio

項目文件不少，爲了簡單處理，就只修改了其中三個文件。（index.ejs  index.js   style.css )

（1）直接修改routes路由中的index.js文件，這也是最核心的部分。

仍是看代碼吧，有足夠的註釋

 1 var express = require('express');
 2 var router = express.Router();
 3 var http = require('http');
 4 var cheerio = require('cheerio');
 5 
 6 /* GET home page. */
 7 router.get('/', function(req, res, next) {
 8   res.render('index', { title: '簡單nodejs爬蟲' });
 9   });
10 router.get('/getJobs', function(req, res, next) { // 瀏覽器端發來get請求
11 var page = req.param('page');  //獲取get請求中的參數 page
12 console.log("page: "+page);
13 var Res = res;  //保存，防止下邊的修改
14 //url 獲取信息的頁面部分地址
15 var url = 'http://www.lagou.com/jobs/list_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91?kd=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91&spc=1&pl=&gj=&xl=&yx=&gx=&st=&labelWords=label&lc=&workAddress=&city=%E5%85%A8%E5%9B%BD&requestId=&pn=';
16 
17 http.get(url+page,function(res){  //經過get方法獲取對應地址中的頁面信息
18     var chunks = [];
19     var size = 0;
20     res.on('data',function(chunk){   //監聽事件 傳輸
21         chunks.push(chunk);
22         size += chunk.length;
23     });
24     res.on('end',function(){  //數據傳輸完
25         var data = Buffer.concat(chunks,size);  
26         var html = data.toString();
27     //    console.log(html);
28         var $ = cheerio.load(html); //cheerio模塊開始處理 DOM處理
29         var jobs = [];
30 
31         var jobs_list = $(".hot_pos li");
32         $(".hot_pos>li").each(function(){   //對頁面崗位欄信息進行處理  每一個崗位對應一個 li  ,各標識符到頁面進行分析得出
33             var job = {};
34             job.company = $(this).find(".hot_pos_r div").eq(1).find("a").html(); //公司名
35             job.period = $(this).find(".hot_pos_r span").eq(1).html(); //階段
36             job.scale = $(this).find(".hot_pos_r span").eq(2).html(); //規模
37 
38             job.name = $(this).find(".hot_pos_l a").attr("title"); //崗位名
39             job.src = $(this).find(".hot_pos_l a").attr("href"); //崗位連接
40             job.city = $(this).find(".hot_pos_l .c9").html(); //崗位所在城市
41             job.salary = $(this).find(".hot_pos_l span").eq(1).html(); //薪資
42             job.exp = $(this).find(".hot_pos_l span").eq(2).html(); //崗位所需經驗
43             job.time = $(this).find(".hot_pos_l span").eq(5).html(); //發佈時間
44 
45             console.log(job.name);  //控制檯輸出崗位名
46             jobs.push(job);  
47         });
48         Res.json({  //返回json格式數據給瀏覽器端
49             jobs:jobs
50         });
51     });
52 });
53 
54 });
55 
56 module.exports = router;

（2）node.js抓取的核心代碼就是上面的部分了。

下一步就是將抓取到的數據展現出來，因此須要另外一個頁面，將views中的index.ejs模板修改一下

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title><%= title %></title>
 5     <link rel='stylesheet' href='/stylesheets/style.css' />
 6   </head>
 7   <body>
 8     <h3>【nodejs爬蟲】 獲取拉勾網招聘崗位--前端開發</h3>
 9     <p>初始化完成 ...</p>
10     <p><button class="btn" id="btn0" onclick="cheerFetch(1)">點擊開始抓取第一頁</button></p>
11     <div class="container">
12     <!--<div class="jobs"> </div>-->
13     </div>
14     <div class="footer">
15     <p class="fetching">數據抓取中 ... 請稍後</p>
16         <button class="btn" id="btn1" onclick="cheerFetch(--currentPage)">抓取上一頁</button>
17         <button class="btn" id="btn2" onclick="cheerFetch(++currentPage)">抓取下一頁</button>
18     </div>
19     <script type="text/javascript" src="javascripts/jquery.min.js"></script>
20     <script type="text/javascript">
21     function getData(str){   //獲取到的數據有雜亂..須要把前面部分去掉,只須要data（<em>......<em>  data)
22         if(str){
23         return str.slice(str.lastIndexOf(">")+1);
24     }
25 }
26 
27 document.getElementById("btn1").style.visibility = "hidden";
28 document.getElementById("btn2").style.visibility = "hidden";
29 var currentPage = 0;  //page初始0
30 
31 function cheerFetch(_page){  //抓取數據處理函數
32     if(_page == 1){ 
33         currentPage  = 1;      //開始抓取則更改page
34     }
35     $(document).ajaxSend(function(event, xhr, settings) {  //抓取中...
36         $(".fetching").css("display","block");
37     });
38     $(document).ajaxSuccess(function(event, xhr, settings) {  //抓取成功
39         $(".fetching").css("display","none");
40     });
41     $.ajax({   //開始發送ajax請求至路徑 /getJobs  進而做頁面抓取處理
42         data:{page:_page},  //參數 page = _page
43         dataType: "json",
44         type: "get",
45         url: "/getJobs",
46         success: function(data){   //收到返回的json數據
47             console.log(data);
48             var html = "";
49             $(".container").empty();
50             if(data.jobs.length == 0){ 
51                 alert("Error2: 未找到數據..");
52                 return;
53             }
54             for(var i=0;i<data.jobs.length;i++){   //遍歷數據並提取處理
55                 var job = data.jobs[i];
56                 html += "<div class='jobs'><p><span >崗位序號：</span>  "+((i+1)+15*(currentPage-1))+"</p>"+
57                 "<p>崗位名稱：<a href='"+job.src+"'target='_blank'>"+job.name+"</a></p>"+
58                 "<p><span >崗位所在公司：</span>  "+job.company+"</p>"+
59                 "<p><span>公司階段：</span>  "+getData(job.period)+"</p>"+
60                 "<p><span>崗位規模：</span>  "+getData(job.scale)+"</p>"+
61                 "<p><span>崗位所在城市：</span>  "+job.city+"</p>"+
62                 "<p><span>崗位薪資：</span>  "+getData(job.salary)+"</p>"+
63                 "<p><span>崗位最低經驗要求：</span>  "+getData(job.exp)+"</p>"+
64                 "<p><span>崗位發佈時間：</span>  "+getData(job.time)+"</p>"+
65                 "</div>"
66             }
67 
68             $(".container").append(html);  //展示至頁面
69             if(_page == 1){ 
70                 document.getElementById("btn1").style.visibility = "hidden";
71                 document.getElementById("btn2").style.visibility = "visible";
72             }else if(_page > 1){ 
73                 document.getElementById("btn1").style.visibility = "visible";
74                 document.getElementById("btn2").style.visibility = "visible";
75             }
76         },
77         error: function(){ 
78             alert("Error1: 未找到數據..");
79         }
80     });
81 }
82 
83     </script>
84   </body>
85 </html>

（3）固然了，也少不了樣式部分的簡單修改  public文件下的 style.css

body {
  padding: 20px 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
  color: #00B7FF;
  cursor: pointer;
}
.container{position: relative;width: 1100px;overflow: hidden;zoom:1;}
.jobs{margin: 30px; float: left;}
.jobs span{ color: green; font-weight: bold;}
.btn{cursor: pointer;}
.fetching{display: none;color: red;}
.footer{clear: both;}

基本改動的也就這三個文件了。

因此，若是要測試一下的話，能夠新建項目後，直接修改對應的那三個文件。

修改爲功後，就能夠測試一下了。

 

3.測試結果

1） 首先在控制檯中執行 npm start

2) 接下來在瀏覽器輸入http://localhost:3000/開始訪問

3) 點擊開始抓取(這裏每次抓取15條，也就是原網址對應的15條）

...

4) 再抓取下一頁也仍是能夠的~

 

5) 再來看看控制檯的輸出

 

 

　　　　看看看看...多簡單的小爬蟲呀..

　　　　簡單歸簡單，最重要的是，知道了最基本的處理形式。

 

 

 

 

 

 

 

 ------------------源文下面

版權申明：歡迎轉載，但請註明出處。

做者相關推薦

xpath選擇器簡介及如何使用

範仁義 2018-10-18 15:15 閱讀:139 評論:0

 

如何使用robots禁止各大搜索引擎爬蟲爬取網站

範仁義 2018-09-27 10:23 閱讀:430 評論:0

 

javascript怎麼獲取指定url網頁中的內容

範仁義 2018-07-05 12:31 閱讀:4854 評論:0

 

爬蟲抓取頁面數據原理（php爬蟲框架有不少 ）

範仁義 2018-05-16 14:46 閱讀:97 評論:0

 

Java爬蟲

範仁義 2017-05-24 03:48 閱讀:394 評論:0

 

 

翻過這道山，就有人聽到你的故事。

項目（需求）是很好的學習途徑，項目（需求）+看書，這樣效果纔好，注意項目在前面。方向錯了的話，容易出問題和狼狽。

---

擇苦則安，擇作則樂（閒）。

悟透：全部錯誤的抉擇(全部的掙扎)都是由於沒想明白，沒領悟透。

接兼職：瘋狂接兼職技能才能快速提高。這絕對是當下最最最優秀的決定。勤奮是有回報的。我最開始想象的不正是如此麼。

接觸：那些很差的東西，不要接觸，停不下來的，好比遊戲，各類接觸都是觸發的因素，同理能夠應用於學習。

早：任務必定要早點作完，否則越拖心力和耐心會被耗沒的，並且因爲緊急質量和心情都會不會。

背和用和讀：學英語效率最高的辦法就是背和用，背些有趣的東西。詞根詞綴語法是輔助，除非能記住。英語是讀記住的。

輕學無用：學生時代學html和以前學英語的感覺，輕學無用，不爲需求學，不學全面無用。

學校系統學習和自學的區別：在於學校提供系統教育，提供培養方案，並且給你很好的學習環境（有夥伴，有競爭，有資源，有檢測），本身不抓緊學習就要廢了。本質都是提供一種謀生手段。好比自學計算機，你學不到高數上面去吧。並且給了一種限制或者說自制，把在臨界線外的人都拉回去。

學習和遊戲的區別的啓示：像遊戲同樣，每次學習完，你告訴本身，你學到了什麼，你收穫到了什麼。是你在遊戲中得到了多少道具裝備等級場景，這個給你的溫馨知足感。問題不是你學了多少，而是你到底學會了多少。

遊戲-不想作事-無聊：不是由於想玩遊戲而玩遊戲，是由於不想作事，無聊才玩遊戲，遊戲也是無盡的，玩完了這個，你總會再找到另一個。同理，電影，電視劇，影評也是看不完的。人生不過就那點事，親情，友情，愛情，奮鬥，財富，爭鬥，心機，腦子，生活。這麼久的..應該也體驗的差很少了

人生無大事：重在堅持，重在平時。所謂的但願並不是是但願，或者說並不是是但願的所有，好比詞根詞綴，語法，再到背，生活，沒有人會告訴你這是幾分之幾的鑰匙，這即是有趣的點。所謂的絕望，未必是絕望，好比大四下，頗有多是但願和機遇。

換環境：是個可行的方法，可是我不能什麼事情都依靠外物啊，內在覺醒，經歷，悟透纔是王道，並且，內在不改變，激勵不夠，換個環境真的有用麼。

同，所得：景色不過如此，每日的熱搜也不過如此，每日的朋友圈也不過如此，每日的電影也不過如此，每日的遊戲(打怪，升級，競技)也不過如此。重點是，每日，本身到底收穫了什麼(學到了什麼)。所謂的新鮮事真的新鮮嗎，那麼多年的歷史(時間映射和地點映射)還涵蓋不了當下麼，再稀奇百倍的事情也發生過。

問題：急於求成，膨脹，過度效率，容易放棄，過度追求事情意義：飯要一口一口吃，腦子是個好東西。還有就是老以爲缺了點什麼。

趣與換：能夠先作簡單有趣的，並且這邊作累了作煩了能夠先去作那邊，而後再回來。

光與狠：要麼內心有光，要麼對本身狠，內心有光的狀況少吧，多半是後者，先行者應該都是這麼作的吧。

直播和抖音：若是將直播和抖音化爲己用，一舉多得，那麼這個事情就頗有意義了吧。

監管：在心智和閱歷不夠的狀況下缺少監管是至關恐怖的事情（小孩子沒有是非分明能力，易衝動，缺少監管很容易從惡），事實上，就算心智和閱歷很夠，缺少監管一樣是很恐怖的事情（貪官貪財，官員瀆職）。

圖形化記憶：好比插件使用技巧，將各個技巧融入插件圖和代碼圖。

自信：正常狀態下突破，自信點得到一點，而在不良狀態下突破，獲取的自信點應該兩點，或者是多點。

約定：初期規則和約定：https://www.bilibili.com/video/av35953030/?p=57。

空閒應該作什麼：把以前沒來得及作實驗的插件都實驗一下，文章沒有消化的消化一下。兼職，本身項目，

---

最快最好的學習方式：書和視頻一塊兒學習是最好的方式，單看視頻作筆記花時間，單看書印象不深入以及理解不深入。那些好書是不可或缺的，由於視頻裏面不少東西也講不到，好比正在看的幾本書。

命名：要給招數起名字，沒有名字，沒有通過大腦，沒有深入印象，他們永遠都不是本身的，找一個本身喜歡印象深入的名字作對應。

困境：有多少人困在這一層，而生活有趣的是，沒有人告訴你須要去突破。（也沒有人告訴你要怎麼突破）

速成和提高的有效途徑：每日目標明確：每日的訓練要目標明確，目標明確，可速成，可提高，也是解決困境最好的方式。

調生物鐘最簡單方法：某一日睡覺不夠，而後就會早睡。

六慾，迷茫：人皆有六慾，人皆會迷茫，沒必要太自責，及時收住就對了，不是看誰不迷，而是看誰可以及時回頭是岸，事實上，全部的人都會迷，無一例外。及時亡羊補牢。

慌：他們是由於明白這些規律道理，明白事情的發展規律，因此他們一點也不慌，其實慌沒用你們都知道。

對等駕馭：厲害的士兵厲害的將領才能駕馭，厲害的員工厲害的老闆才能駕馭，厲害的男生厲害的女生才能駕馭，厲害的女生厲害的男生才能駕馭。（人間正道是滄桑：及全部）

生活的真諦：整日飽食終日的玩不是生活的意義，整日疲於奔命的學也不是生活的意義，生活的意義在於在於實力穩步提高，勞逸結合，享受生活。必定要作，必定要學，也必定要玩。每日都要完成一些。天天要玩，可是任務作完了才能玩。

每日清0規律：不管是對學習的勞累，仍是對遊戲的無趣，仍是對生活的感覺，每日睡一覺以後就能夠清空絕絕絕大部分，只有極極少一部分會留下來。

開始：不少事情開始了就很難停下來，或者要花好久才能停下來，好比遊戲，好比娛樂，這並非我作的不對，而是我作的不夠好，這種機制同理也可應用於學習。

多遍：學習視頻或者書並非只看一遍就夠了，由於一遍能收穫的內容很是有限，固然也能夠只看一遍，那就須要好好記憶，多提問，多入腦子。

複利：量變產生質變第一步，博客評論變成了討論區。但是量還遠遠不夠。用於英語以及技術。英語提高和技術提高就靠這個了。人就是太急於求成，過度追求效率，過度追求事情的意義了，因此致使容易放棄。

主角：每一個人都想當主角，每一個人也都知道主角的巨大優點，主角可以擁有想要的榮光愛情以及各類資源，可是，各類因素形成，只有極少數人才能作主角。好比L。

修真小說：的確是不可或缺的一環，不論緣由，無論因果，迷茫期都是沒看修真小說的時期。

自卑自信：回憶大學經歷，真的很是不缺nsxh，以及我忽略掉的gzyy，因此對於c，以及scnx的自卑能夠去了，是有不足，可是每一個人都不是完美的。每一個人的潛力無限，自信能夠來。總有比你厲害的多的人物，你知道的也頗有限，想自負都還不夠資格。

理解：可以使用並不表明理解，好比2歲大的寶寶，在這個階段，寶寶能夠正確告訴別人「我是男孩」或「我是女孩」。可是，這只是一種簡單的「轉述」行爲，由於父母告訴他（她）「你是男（女）寶寶」，而還沒有造成真正意義上的性別意識。

 

分類:  JavaScript