建网站那个网最好,北京市建设局网站,做网站成品,重庆市建设节能中心网站目录
AJAX 简介
任务目标
创建Ajax网站
创建服务器程序
编写爬虫程序 AJAX 简介 AJAX#xff08;Asynchronous JavaScript And XML#xff0c;异步 JavaScript 及 XML#xff09;
Asynchronous 一种创建交互式、快速动态网页应用的网页开发技术通过在后台与服务器进行…目录
AJAX 简介
任务目标
创建Ajax网站
创建服务器程序
编写爬虫程序 AJAX 简介 AJAXAsynchronous JavaScript And XML异步 JavaScript 及 XML
Asynchronous 一种创建交互式、快速动态网页应用的网页开发技术通过在后台与服务器进行少量数据交换无需重新加载整个网页的情况下能够异步更新部分网页的技术。AJAX是一种新的技术组合即基于因特网标准组合以下技术 XMLHttpRequest 对象与服务器异步交互数据JavaScript/DOM显示/取回信息CSS设置数据的样式XML常用作数据传输的格式 任务目标
现在的网页中大量使用了Ajax技术通过JavaScript在客户端向服务器发出请求服务器返回数据给客户端客户端再把数据展现出来这样做可以减少网页的闪动 让用户有更好的体验。我们先设计一个这样的网页然后使用 Selenium 编写爬虫程序爬取网页的数据。 创建Ajax网站
phone.html 如下
注phone.html 文件要位于 templates 这个目录下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body onloadinit()
div选择品牌select idmarks onchangedisplay()/select/div
div idphones/div
/body
scriptfunction init() {var marks new Array(华为, 苹果, 三星);var selm document.getElementById(marks);for (var i 0; i marks.length; i) {selm.options.add(new Option(marks[i], marks[i]));}selm.selectedIndex 0;display();}function display() {try {var http new XMLHttpRequest();var selm document.getElementById(marks);var m selm.options[selm.selectedIndex].text;http.open(get, /phones?mark m, false);http.send(null);msg http.responseText; //传递参数一般post方法使用get不传参数obj eval(( msg )); //eval”(执行的内容)”);加上圆括号的目的是迫使eval函数在运行JavaScript代码的时候强制将括号内的表达式转化为JavaScript对象。// JS中将JSON的字符串解析成JSON数据格式s table width200 border1trtd型号/tdtd价格/td/trfor (var i 0; i obj.phones.length; i) {s s trtd obj.phones[i].model /tdtd obj.phones[i].price /td/tr;}s s /table;document.getElementById(phones).innerHTML s;} catch (e) {alert(e);}}
/script
/html
创建服务器程序
服务器server.py程序如下
import flask
import jsonapp flask.Flask(__name__)app.route(/)
def index():return flask.render_template(phone.html)app.route(/phones)
def getPhones():mark flask.request.values.get(mark)phones []if mark 华为:phones.append({model: P9, mark: 华为, price: 3800})phones.append({model: P10, mark: 华为, price: 4000})elif mark 苹果:phones.append({model: iPhone5, mark: 苹果, price: 5800})phones.append({model: iPhone6, mark: 苹果, price: 6800})elif mark 三星:phones.append({model: Galaxy A9, price: 2800})s json.dumps({phones: phones}) # python对象转化为json字符串return sapp.run()网站结果如下 编写爬虫程序 (1) 创建一个浏览器对象driver使用这个driver对象模拟浏览器。 (2) 访问http://127.0.0.1:5000网站爬取第一个页面的手机数据。 (3) 从第一个页面中获取select中所有的选择项目options。 (4) 循环options中的每个option,并模拟这个option的click点击动作触发 onchange 爬虫程序 WebScraper.py 如下
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
import timedef spider(index):trs driver.find_elements(By.TAG_NAME, tr)for i in range(1, len(trs)): # 从第二行开始查找和提取# print(i)tds trs[i].find_elements(By.TAG_NAME, td)model tds[0].textprice tds[1].textprint(%-16s%-16s % (model, price))select driver.find_element(By.ID, marks)options select.find_elements(By.TAG_NAME, option)if index len(options) - 1:index 1options[index].click()time.sleep(3)spider(index)chrome_options Options()
chrome_options.add_argument(--headless)
driver webdriver.Chrome()
driver.get(http://127.0.0.1:5000)spider(0) # 从option0开始driver.close()运行结果 下一篇文章5.6 Selenium等待HTML元素
