Browser JavaScript Bookmark Small Application __javascript

Unemployed, bored at home, thinking of yesterday's JS bookmark application is actually very suitable for internal use, so I think a need

Salesman Xiao Wang every day to out a sales report, there are columnar figure what kind of, he wanted to get technology to help him get a report automatically generated by the program, but the company's business system is another company to do, the data is also hosted over there, Xiao Zhang can not directly from the database to get data, so he used the roundabout way, reptiles, in order to facilitate the use of Xiao Wang , Xiao Zhang decided to use JS bookmark form

Here is the program demo

Directory:

App

|----templates

|----index.html (Generate report page)

|----test.js (JS crawler)

|----test.py (FLASK program)

First make a JS bookmark, the production process please see my last blog http://blog.csdn.net/u013055678/article/details/79401139

The code is as follows:

Javascript:void (function () {
	//Create an element
	var e=document.createelement (' script ');
	var ex=document.createelement (' script ');
	Add attributes to
	the element e.setattribute (' src ', ' http://127.0.0.1:5000 ');
	Ex.setattribute (' src ', ' http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js ');
	Add an element to the page
	Document.body.appendChild (e);
	Document.body.appendChild (ex);
}) ())

Javascript:void (function () {var e=document.createelement (' script '); var ex=document.createelement (' script '); E.setattribute (' src ', ' http://127.0.0.1:5000 '); Ex.setattribute (' src ', ' http://cdn.static.runoob.com/libs/jquery/ 1.10.2/jquery.min.js ');d ocument.body.appendChild (e);d Ocument.body.appendChild (ex);}) ())

Need to delete the annotation, so I pasted the formatted and a whole line of two pieces of code

Test.js Code:

(function () {//Test alert ("JS bookmark valid"); Data to be sent var jsondata = {} var xx = []//var yy = [] var Sulex = document.getelementsbyclassname ("Hotarti
    Cle-list sort-list classsort-list ");
    var ex = Sulex[0].getelementsbyclassname ("Odd-overhidden Floatl"); for (var i = 0; i < ex.length i++) {Xx.push ({"Name": Ex[i].innertext, "num": Sulex[0].getelementsbyclassname (" Read List-left Floatr ") [I].innertext.replace (" article "," ")})}///var Dulex = Document.getelementsbyclassname (" Hotarticl
E-list timesort-list ");
var EEx = dulex[0].getelementsbyclassname ("Odd-overhidden Floatl"); for (var i = 0; i < eex.length i++) {////alert (eex[i].innertext);////Alert (dulex[0].getelement
Sbyclassname ("read List-left floatr") [I].innertext); Yy.push ({"Name": Eex[i].innertext, "num":d ulex[0].getelementsbyclassname ("read List-left floatr") [I].INNERTEXT.R
Eplace ("article", "")})//} jsondata["XX"]=XX;
    jsondata["yy"]=YY;Console.log (Json.stringify (jsondata)); $.ajax ({url: ' http://127.0.0.1:5000/postdata ', type: ' Post ',//Data sending way DataType: ' JSON ', Accept data formats (there are many, commonly used Html,xml,js,json) data:{"Data": Json.stringify (Jsondata)},//To be passed Error:func
            tion () {//Failed alert (' send failed ');
                }, Success:function (msg) {//Success if (msg) {window.open (msg["url"]);
}
              }
          }); })();

test.py Code:

#-*-coding:utf-8-*-__author__ = "ZJL" from flask import flask to flask Import request from flask import Response F Rom flask import render_template from queue import Queue import JSON app = Flask (__name__) #队列 q = Queue () #跨域 def RESPO

Nse_headers (content): resp = Response (content) resp.headers[' access-control-allow-origin '] = ' * ' Return resp # JS Code @app. Route ("/") def index (): of = open ("Test.js", "r") Jsd = Of.read () return JSD # JS crawl data sent over @app. ro Ute ("/postdata", methods=[' POST ') def postdata (): Datax = Request.form.to_dict () #这里可以加一个处理的主函数, after processing completes the data into queue Q

. Put (datax["data"]) Data_url = {"url": "Http://127.0.0.1:5000/xxx"} Return Response_headers (Json.dumps (Data_url)) #展示页面 @app. Route ('/xxx ') def xxx (): Return Render_template ("index.html") #展示页面数据 @app. Route ('/echarts ') def echarts ( ): While not Q.empty (): # in queue fetch data x = Q.get () # Print ("xxxxxx", x) resp = Response_head ERS (x) return reSP if __name__ = = "__main__": App.run (Debug=true) 

Templates/index.html Code:

 


Effect:





Now Xiao Wang just browser access to the data page, click the JS bookmark, you will jump directly to the report page, and then just use the browser with the printing function to print out, or Save as a PDF, you can, applause ...

If there is no jump page please see the browser address bar to the right is not intercepted the window





Process:

First from the browser to crawl data, through Ajax sent to the background service, the background received after processing (can do a lot of processing, not just show data, there are many statistics, sales forecasts, sales suggestions, etc.), and then send the data to the HTML page, with Echarts display ( Echarts also has a lot of other graphics)