web(八)--angular从cgi获取数据

一. cgi用前面小节的req_resp.cpp, 这里略去cgi的编译和部署.

 

二. 下面的几个文件在同一个目录.

 

1. index.py 增加两处:

(1)

　　

 (r "  /index.py/angularjs_cgi  " , AngularjsCgiHandler)

(2) 

 class   AngularjsCgiHandler(tornado.web.RequestHandler):
    def   get  (self):
        self.render(  "  angularjs_cgi.html  " )

 import tornado.ioloop
import tornado.web

  class   MainHandler(tornado.web.RequestHandler):
    def   get  (self):
        self.write(  "  Hello, world, this is tornado test!  "  )

  class   StoryHandler(tornado.web.RequestHandler):
    def   get  (self, story_id):
        self.write(  "  You requested the story   "  +  story_id)

  class   TemplateHandler(tornado.web.RequestHandler):
    def   get  (self):
        items  = [ "  Item 1  " ,  "  Item 2  " ,  "  Item 3  "  ]
        self.render(  "  template.html  " , title= "  My title  " , items= items)

  class   AngularjsTestHandler(tornado.web.RequestHandler):
    def   get  (self):
        self.render(  "  angularjs_test.html  "  )

  class   AngularjsCgiHandler(tornado.web.RequestHandler):
    def   get  (self):
        self.render(  "  angularjs_cgi.html  "  )

application  =  tornado.web.Application([
    (r  "  /  "  , MainHandler),
    (r  "  /index.py  "  , MainHandler),
    #(r  "  /story/([0-9]+)  "  , StoryHandler),
    (r  "  /template  "  , TemplateHandler),
    (r  "  /index.py/template  "  , TemplateHandler),
    (r  "  /index.py/angularjs_test  "  , AngularjsTestHandler),
    (r  "  /index.py/angularjs_cgi  "  , AngularjsCgiHandler),
])

  if  __name__ ==  "  __main__  "  :
    application.listen(  8888  )
    tornado.ioloop.IOLoop.instance().start() 

 

 

2. angularjs_cgi.html

 <!  DOCTYPE html  > 
 <  html  > 
 <  body  > 
 <  h2  > angularjs_cgi.html </  h1  > 
 <  h2  > angularjs get data from cgi with https </  h2  > 

 <  div   ng-app  ="angularjs_cgi_app"   ng-controller  ="angularjs_cgi_ctrl"  > 
     <  p  > data from angularjs:||data_from_angularjs||  </  p  > 
     <  p  > data from cgi:||data_from_cgi||  </  p  > 
 </  div  > 

 </  body  > 
 </  html  > 

 <  script   src  ="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"  ></  script  > 
 <  script   src  ="angularjs_cgi.js"  ></  script  > 

 

3. angularjs_cgi.js      angular利用$http从cgi获取数据, $http的使用google之.

 var  app = angular.module("angularjs_cgi_app" , []);

app.config(  function  ($interpolateProvider) {
  $interpolateProvider.startSymbol( '||' );
  $interpolateProvider.endSymbol( '||' );
});

app.controller( "angularjs_cgi_ctrl",  function  ($scope, $http, $timeout, $interval) {

    $scope.data_from_angularjs  = 1234 ;

      //   data from cgi 
    $scope.data_from_cgi = '' ;
    $scope.get_data  =  function  (){
        $http({
        method: "GET" ,
        url: "/req_resp.cgi?hello=1" ,
        data:{
            action :  "this_is_action" ,
            login_name :  "zhangsan" ,
            }
        }).success(  function  (data){
            $scope.data_from_cgi  =  data;
        }).error(  function  (){
            alert( 'get data from cgi err!' );
            setTimeout($scope.get_data(),  4000 );
        });
    }
    $scope.get_data();
}); 

 

 

三. http://localhost/angularjs_cgi访问

浏览器显示如下(去除格式了, 其中data_from_cgi即req_resp.cpp返回的内容 ):

 

angularjs_cgi.html

angularjs get data from cgi with https

data from angularjs:1234

data from cgi:<H4>PID: 4072</H4> <H4>Request Number: 17</H4> <H4>Request Environment</H4> QUERY_STRING=hello=1

 

查看更多关于web(八)--angular从cgi获取数据的详细内容...