avascript怎么获取指定url网页中的内容
> 一、总结（点击显示或隐藏总结内容）
二、用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);
三、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(); |
四、通过node.js获取
以前一直听说有爬虫这种东西，稍微看了看资料，貌似不是太复杂。
正好了解过node.js，那就基于它来个简单的爬虫。
1.本次爬虫目标：
从拉钩招聘网站中找出“前端开发”这一类岗位的信息，并作相应页面分析，提取出特定的几个部分如岗位名称、岗位薪资、岗位所属公司、岗位发布日期等。并将抓取到的这些信息，展现出来。
初始拉钩网站上界面信息如下：
2.设计方案：
爬虫，实际上就是通过相应的技术，抓取页面上特定的信息。
这里主要抓取上图所示岗位列表部分相关的具体岗位信息。
首先，抓取，就得先有地址url:
这个链接就是岗位列表的第一页的网页地址。
我们通过对地址的参数部分进行分析，先不管其他选择的参数，只看最后的参数值：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) 再来看看控制台的输出
看看看看...多简单的小爬虫呀..
简单归简单，最重要的是，知道了最基本的处理形式。
------------------源文下面
版权申明：欢迎转载，但请注明出处。
作者相关推荐
翻过这道山，就有人听到你的故事。
项目（需求）是很好的学习途径，项目（需求）+看书，这样效果才好，注意项目在前面。方向错了的话，容易出问题和狼狈。
择苦则安，择做则乐（闲）。
悟透：所有错误的抉择(所有的挣扎)都是因为没想明白，没领悟透。
接兼职：疯狂接兼职技能才能快速提升。这绝对是当下最最最优秀的决定。勤奋是有回报的。我最开始想象的不正是如此么。
接触：那些不好的东西，不要接触，停不下来的，比如游戏，各种接触都是触发的因素，同理可以应用于学习。
早：任务一定要早点做完，不然越拖心力和耐心会被耗没的，而且由于紧急质量和心情都会不会。
背和用和读：学英语效率最高的办法就是背和用，背些有趣的东西。词根词缀语法是辅助，除非能记住。英语是读记住的。
轻学无用：学生时代学html和之前学英语的感受，轻学无用，不为需求学，不学全面无用。
学校系统学习和自学的区别：在于学校提供系统教育，提供培养方案，而且给你很好的学习环境（有伙伴，有竞争，有资源，有检测），自己不抓紧学习就要废了。本质都是提供一种谋生手段。比如自学计算机，你学不到高数上面去吧。而且给了一种限制或者说自制，把在临界线外的人都拉回去。
学习和游戏的区别的启示：像游戏一样，每次学习完，你告诉自己，你学到了什么，你收获到了什么。是你在游戏中获得了多少道具装备等级场景，这个给你的舒适满足感。问题不是你学了多少，而是你到底学会了多少。
游戏-不想做事-无聊：不是因为想玩游戏而玩游戏，是因为不想做事，无聊才玩游戏，游戏也是无尽的，玩完了这个，你总会再找到另外一个。同理，电影，电视剧，影评也是看不完的。人生不过就那点事，亲情，友情，爱情，奋斗，财富，争斗，心机，脑子，生活。这么久的..应该也体验的差不多了
人生无大事：重在坚持，重在平时。所谓的希望并非是希望，或者说并非是希望的全部，比如词根词缀，语法，再到背，生活，没有人会告诉你这是几分之几的钥匙，这便是有趣的点。所谓的绝望，未必是绝望，比如大四下，很有可能是希望和机遇。
换环境：是个可行的方法，但是我不能什么事情都依靠外物啊，内在觉醒，经历，悟透才是王道，而且，内在不改变，激励不够，换个环境真的有用么。
同，所得：景色不过如此，每日的热搜也不过如此，每日的朋友圈也不过如此，每日的电影也不过如此，每日的游戏(打怪，升级，竞技)也不过如此。重点是，每日，自己到底收获了什么(学到了什么)。所谓的新鲜事真的新鲜吗，那么多年的历史(时间映射和地点映射)还涵盖不了当下么，再稀奇百倍的事情也发生过。
问题：急于求成，膨胀，过分效率，容易放弃，过分追求事情意义：饭要一口一口吃，脑子是个好东西。还有就是老觉得缺了点什么。
趣与换：可以先做简单有趣的，而且这边做累了做烦了可以先去做那边，然后再回来。
光与狠：要么心里有光，要么对自己狠，心里有光的情况少吧，多半是后者，先行者应该都是这么做的吧。
直播和抖音：如果将直播和抖音化为己用，一举多得，那么这个事情就很有意义了吧。
监管：在心智和阅历不够的情况下缺乏监管是相当恐怖的事情（小孩子没有明辨是非能力，易冲动，缺乏监管很容易从恶），事实上，就算心智和阅历很够，缺乏监管同样是很恐怖的事情（贪官贪财，官员渎职）。
图形化记忆：比如插件使用技巧，将各个技巧融入插件图和代码图。
自信：正常状态下突破，自信点获得一点，而在不良状态下突破，获取的自信点应该两点，或者是多点。
约定：初期规则和约定：https://www.bilibili.com/video/av35953030/?p=57。
空闲应该做什么：把之前没来得及做实验的插件都实验一下，文章没有消化的消化一下。兼职，自己项目，
最快最好的学习方式：书和视频一起学习是最好的方式，单看视频做笔记花时间，单看书印象不深刻以及理解不深刻。那些好书是不可或缺的，因为视频里面很多东西也讲不到，比如正在看的几本书。
命名：要给招数起名字，没有名字，没有经过大脑，没有深刻印象，他们永远都不是自己的，找一个自己喜欢印象深刻的名字做对应。
困境：有多少人困在这一层，而生活有趣的是，没有人告诉你需要去突破。（也没有人告诉你要怎么突破）
速成和提升的有效途径：每日目标明确：每日的训练要目标明确，目标明确，可速成，可提升，也是解决困境最好的方式。
调生物钟最简单方法：某一日睡觉不够，然后就会早睡。
六欲，迷茫：人皆有六欲，人皆会迷茫，不必太自责，及时收住就对了，不是看谁不迷，而是看谁能够及时悬崖勒马，事实上，所有的人都会迷，无一例外。及时亡羊补牢。
慌：他们是因为明白这些规律道理，明白事情的发展规律，所以他们一点也不慌，其实慌没用大家都知道。
对等驾驭：厉害的士兵厉害的将领才能驾驭，厉害的员工厉害的老板才能驾驭，厉害的男生厉害的女生才能驾驭，厉害的女生厉害的男生才能驾驭。（人间正道是沧桑：及所有）
生活的真谛：整日饱食终日的玩不是生活的意义，整日疲于奔命的学也不是生活的意义，生活的意义在于在于实力稳步提升，劳逸结合，享受生活。一定要做，一定要学，也一定要玩。每日都要完成一些。每天要玩，但是任务做完了才能玩。
每日清0规律：无论是对学习的劳累，还是对游戏的无趣，还是对生活的感受，每日睡一觉之后就可以清空绝绝绝大部分，只有极极少一部分会留下来。
开始：很多事情开始了就很难停下来，或者要花很久才能停下来，比如游戏，比如娱乐，这并不是我做的不对，而是我做的不够好，这种机制同理也可应用于学习。
多遍：学习视频或者书并不是只看一遍就够了，因为一遍能收获的内容非常有限，当然也可以只看一遍，那就需要好好记忆，多提问，多入脑子。
复利：量变产生质变第一步，博客评论变成了讨论区。可是量还远远不够。用于英语以及技术。英语提升和技术提升就靠这个了。人就是太急于求成，过分追求效率，过分追求事情的意义了，所以导致容易放弃。
主角：每个人都想当主角，每个人也都知道主角的巨大优势，主角能够拥有想要的荣光爱情以及各种资源，但是，各种因素造成，只有极少数人才能做主角。比如L。
修真小说：的确是不可或缺的一环，不论原因，不管因果，迷茫期都是没看修真小说的时期。
自卑自信：回忆大学经历，真的非常不缺nsxh，以及我忽略掉的gzyy，所以对于c，以及scnx的自卑可以去了，是有不足，但是每个人都不是完美的。每个人的潜力无限，自信可以来。总有比你厉害的多的人物，你知道的也很有限，想自负都还不够资格。
理解：能够使用并不代表理解，比如2岁大的宝宝，在这个阶段，宝宝可以正确告诉别人“我是男孩”或“我是女孩”。但是，这只是一种简单的“转述”行为，因为父母告诉他（她）“你是男（女）宝宝”，而尚未形成真正意义上的性别意识。
分类: JavaScript
