jquery ajax flask 前后端通讯

灰太狼 2022-06-13 14:38 264阅读 0赞

如题，以自己的博客为例，抓取博客信息，一个api后台服务提供数据，前端服务接收数据并展示

目录结构：

test

|——app

  1.     |----\_\_init\_\_.py
  3.     |----flaskapp.py(后台服务)

|——blogtest

  1.     |----index.html(首页)
  3.     |----gettitle.html(标题页)
  5.     |----getmian.html(内容页)

|——get_pagenum.py(页码抓取)

|——get_title.py(标题抓取)
|——get_main.py(内容抓取)

|——rest_response.py(返回信息处理)

代码：

抓取部分：

get_pagenum.py： 

  1. # -*- coding: utf-8 -*-
  2. #__author__="ZJL"
  4. import requests
  5. from lxml import etree
  7. class GetPageNum(object):
  8.     def __init__(self):
  9.         self.session = requests.session()
  10.         self.headers = {
  11.             "Upgrade-Insecure-Requests": "1",
  12.             "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36",
  13.             "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
  14.             "Accept-Encoding": "gzip, deflate, sdch",
  15.             "Accept-Language": "zh-CN,zh;q=0.8",
  16.         }
  18.     def get_pagenum(self,resp):
  19.         url = "http://blog.csdn.net/u013055678?viewmode=contents"
  20.         r = self.session.get(url, headers=self.headers, timeout=30)
  21.         html_bodys = etree.HTML(r.content)
  22.         pagenum = html_bodys.xpath('//*[@id="papelist"]/span/text()')
  23.         if pagenum:
  24.             pagenum = pagenum[0].split("共")[1].split("页")[0]
  25.         resp.success(pagenum)

get_title.py：

  1. # -*- coding: utf-8 -*-
  2. #__author__="ZJL"
  4. import requests
  5. from lxml import etree
  6. # from rest_response import RestResponse
  8. class TitleGet(object):
  9.     def __init__(self):
  10.         self.session = requests.session()
  11.         self.headers = {
  12.             "Upgrade-Insecure-Requests":"1",
  13.             "User-Agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36",
  14.             "Accept":"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
  15.             "Accept-Encoding":"gzip, deflate, sdch",
  16.             "Accept-Language":"zh-CN,zh;q=0.8",
  17.         }
  19.     def get_title(self,pagenum,resp):
  20.         data_list=[]
  21.         url = "http://blog.csdn.net/u013055678/article/list/"+str(pagenum)
  22.         r = self.session.get(url,headers=self.headers,timeout=30)
  23.         html_bodys = etree.HTML(r.content)
  24.         title_urls = html_bodys.xpath("//span[@class='link_title']/a")
  25.         if title_urls:
  26.             for title_url in title_urls:
  27.                 data_dict = {}
  28.                 url = title_url.xpath("@href")
  29.                 titletext = title_url.xpath("text()")
  30.                 if not url and titletext:
  31.                     continue
  32.                 url = "http://blog.csdn.net" + url[0].strip()
  33.                 titletext = titletext[0].strip()
  34.                 data_dict["url"] = url
  35.                 data_dict["title"] = titletext
  36.                 data_list.append(data_dict)
  37.         return resp.success(data_list)

get_main.py：

  1. # -*- coding: utf-8 -*-
  2. #__author__="ZJL"
  5. import requests
  6. from lxml import etree
  7. import html
  9. class GetMain(object):
  10.     def __init__(self):
  11.         self.session = requests.session()
  12.         self.headers = {
  13.             "Upgrade-Insecure-Requests": "1",
  14.             "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36",
  15.             "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
  16.             "Accept-Encoding": "gzip, deflate, sdch",
  17.             "Accept-Language": "zh-CN,zh;q=0.8",
  18.         }
  20.     def get_main(self,url,resp):
  21.         r = self.session.get(url, headers=self.headers, timeout=30)
  22.         html_bodys = etree.HTML(r.text)
  23.         # tree = lxml.html.fromstring(r.text)
  24.         # tree = lxml.html.tostring(r.text)
  25.         bodys = html_bodys.xpath('//*[@id="article_content"]')
  26.         # print((etree.tostring(bodys[0],pretty_print=True)).decode())
  27.         html_parser = html.unescape((etree.tostring(bodys[0],pretty_print=True)).decode())
  28.         return resp.success(html_parser)

rest_response.py：

  1. # -*- coding: utf-8 -*-
  2. import time
  3. import json
  5. class RestResponse(object):
  6.     """
  7.     REST请求统一格式返回类，负责返回数据的格式
  8.     """
  9.     def __init__(self):
  10.         self.errCode = 0
  11.         self.errMsg = ""
  12.         self.acceptAt = time.time() * 1000
  13.         self.duration = 0
  14.         self.data = {}
  16.     def success(self, data):
  17.         self.data = data
  19.     def error(self, error):
  20.         self.errCode = error[0]
  21.         self.errMsg = error[1]
  23.     def get_json(self):
  24.         self.duration = time.time() * 1000 - self.acceptAt
  25.         return json.dumps(
  26.             {"errCode": self.errCode, "errMsg": self.errMsg, "acceptAt": self.acceptAt, "duration": self.duration,
  27.              "data": self.data}, ensure_ascii=False)

后台服务代码：

flaskapp.py:

  1. # -*- coding: utf-8 -*-
  2. #__author__="ZJL"
  4. from flask import Flask
  5. from flask import request
  6. from flask import Response
  7. from get_title import TitleGet
  8. from get_main import GetMain
  9. from get_pagenum import GetPageNum
  10. from rest_response import RestResponse
  12. import json
  14. app = Flask(__name__)
  16. def Response_headers(content):
  17.     resp = Response(content)
  18.     resp.headers['Access-Control-Allow-Origin'] = '*'
  19.     return resp
  21. @app.route('/')
  22. def hello_world():
  23.     return Response_headers('hello world')
  25. @app.route('/findTitleList', methods=['POST'])
  26. def findTitleList():
  27.     if request.method == 'POST' and request.form['pagenum']:
  28.         datax = request.form
  29.         print(datax)
  30.         # print("zzzzzzzzzz",type(datax))
  31.         # print("aaaaaaaaaaa",dict(datax))
  32.         # print("zzzzzzzzzz", datax)
  33.         pagenum = request.form['pagenum']
  34.         tg = TitleGet()
  35.         resp = RestResponse()
  36.         tg.get_title(pagenum,resp)
  37.         content = resp.get_json()
  38.         resp = Response_headers(content)
  39.         return resp
  40.     else:
  41.         content = json.dumps({"error_code":"1001"})
  42.         resp = Response_headers(content)
  43.         return resp
  45. @app.route('/findMain', methods=['POST'])
  46. def findMain():
  47.     if request.method == 'POST' and request.form['url']:
  48.         url = request.form['url']
  49.         gm = GetMain()
  50.         resp = RestResponse()
  51.         gm.get_main(url,resp)
  52.         content = resp.get_json()
  53.         content = content
  54.         resp = Response_headers(content)
  55.         return resp
  56.     else:
  57.         content = json.dumps({"error_code": "2001"})
  58.         resp = Response_headers(content)
  59.         return resp
  61. @app.route('/getPagenum', methods=['POST'])
  62. def getPagenum():
  63.     if request.method == 'POST':
  64.         resp = RestResponse()
  65.         gn = GetPageNum()
  66.         gn.get_pagenum(resp)
  67.         content = resp.get_json()
  68.         resp = Response_headers(content)
  69.         return resp
  70.     else:
  71.         content = json.dumps({"error_code": "3001"})
  72.         resp = Response_headers(content)
  73.         return resp
  75. @app.errorhandler(403)
  76. def page_not_found(error):
  77.     content = json.dumps({"error_code": "403"})
  78.     resp = Response_headers(content)
  79.     return resp
  81. @app.errorhandler(404)
  82. def page_not_found(error):
  83.     content = json.dumps({"error_code": "404"})
  84.     resp = Response_headers(content)
  85.     return resp
  87. @app.errorhandler(400)
  88. def page_not_found(error):
  89.     content = json.dumps({"error_code": "400"})
  90.     resp = Response_headers(content)
  91.     return resp
  93. @app.errorhandler(410)
  94. def page_not_found(error):
  95.     content = json.dumps({"error_code": "410"})
  96.     resp = Response_headers(content)
  97.     return resp
  99. @app.errorhandler(500)
  100. def page_not_found(error):
  101.     content = json.dumps({"error_code": "500"})
  102.     resp = Response_headers(content)
  103.     return resp
  105. if __name__ == '__main__':
  106.     app.run(debug=True)#threaded=True,

前端服务：

index.html：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
  7.         </script>
  8.     </head>
  9.     <body οnlοad="load()">
  10.         <h3>我的blog</h3>
  11.         <ul></ul>
  12.     </body>
  13.     <script>
  14.         function load(){
  15.              $.ajax({ 
  16.                 url:'http://127.0.0.1:5000/getPagenum', 
  17.                 type:'post', //数据发送方式 
  18.                 dataType:'json', //接受数据格式 (这里有很多,常用的有html,xml,js,json) 
  19. //                data:'pagenum=1', //要传递的数据 
  20.                 error: function(){ //失败 
  21.                   alert('Error loading document'); 
  22.                 },
  23.                 success: function(msg){ //成功 
  24.                     var num = parseInt(msg["data"])
  25.                   for(var i=1;i<num+1;i++){
  26.                     $("ul").append($("<li><a href='' id='a"+i+"'>"+i+"</a></li>"));
  27.                     $('#a'+i).attr('href',"gettitle.html?num="+i); 
  28.                   }
  29.                 }
  30.               });
  31.           };
  32.     </script>
  33. </html>

gettitle.html：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>aaaa</title>
  6.         <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
  7.         </script>
  8.     </head>
  9.     <body οnlοad="load()">
  10.         <a href="index.html">rturn</a>
  11.         <ul>
  12.         </ul>
  13.     </body>
  14.     <script>
  15.         var num;
  16.         var thisURL = document.URL;
  17. //        alert(thisURL);
  18. //        alert(thisURL.indexOf("index"));
  19.         if(thisURL.indexOf("gettitle")>0){
  20.             var getval =thisURL.split("?")[1];
  21.             num = getval.split("=")[1];
  22. //            alert("aaa"+num);
  23.         }else{
  24.             num="1";
  25.         }
  26. //        alert(num)
  27.           function load(){
  28.              $.ajax({ 
  29.                 url:'http://127.0.0.1:5000/findTitleList', 
  30.                 type:'post', //数据发送方式 
  31.                 dataType:'json', //接受数据格式 (这里有很多,常用的有html,xml,js,json) 
  32.                 data:'pagenum='+num, //要传递的数据 
  33.                 error: function(){ //失败 
  34.                   alert('Error loading document'); 
  35.                 },
  36.                 success: function(msg){ //成功 
  37.                   for(var i=0;i<msg["data"].length;i++){
  38.                     $("ul").append($("<li><a href='' id='a"+i+"'>"+msg["data"][i]["title"]+"</a></li>"));
  39.                     $('#a'+i).attr('href',"getmian.html?url="+msg["data"][i]["url"]); 
  40.                   }
  41.                 }
  42.               });
  43.           };
  44.     </script>
  45. </html>

getmian.html：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
  7.         </script>
  8.     </head>
  9.     <body οnlοad="load()">
  10.         <a href="gettitle.html">rturn</a>
  11.         <div id="blog_main"></div>
  12.     </body>
  13.     <script>
  14.         var thisURL = document.URL;
  15.         var getval =thisURL.split("?")[1];
  16.         var url = getval.split("=")[1];
  17. //        var url = "http://blog.csdn.net/u013055678/article/details/54172693";
  18.         function load(){
  19.              $.ajax({ 
  20.                 url:'http://127.0.0.1:5000/findMain', 
  21.                 type:'post', //数据发送方式 
  22.                 dataType:'json', //接受数据格式 (这里有很多,常用的有html,xml,js,json) 
  23.                 data:'url='+url, //要传递的数据 
  24.                 error: function(){ //失败 
  25.                   alert('Error loading document'); 
  26.                 },
  27.                 success: function(msg){ //成功 
  28.                     $("#blog_main").html(msg["data"]);
  29.                 }
  30.               });
  31.           };
  33.     </script>
  34. </html>

Center

Center 1

Center 2

发表评论

表情：
评论列表 （有 0 条评论，264人围观）

还没有评论，来说两句吧...

相关阅读