本文介紹了django實現(xiàn)前后臺交互實例，分享給大家，希望對大家有所幫助
準備工作：
前端框架：AngularJS+bootstap
數(shù)據(jù)庫：sqlite3
前端代碼：
index.html
<!DOCTYPE html> <html> <head> <link href="/WebApi/scripts/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/WebApi/scripts/angular/angular.min.js"></script> <script type="text/javascript" src="/WebApi/controller/controller.js"></script> <script type="text/javascript" src="/WebApi/service/service.js"></script> <title>hello</title> </head> <body ng-app="myApp" ng-controller="myCtrl"> <h2>hello world!</h2> <!-- <form role="form"> --> <table> <tr> <td> <div class="form-group"> <input type="text" class="form-control" id="name" placeholder="請輸入用戶名" ng-model="username"> </div> </td> </tr> <tr> <td> <div class="form-group"> <input type="passwd" class="form-control" id="name" placeholder="請輸入密碼" ng-model="password"> </div> </td> </tr> <tr> <td> <button type="button" class="btn btn-primary" ng-click="my_submit()">保存</button> </td> </tr> </table> <!-- </form> --> <p class="text-danger">[[ result ]]</p> </body> </html>
controller.js
var app = angular.module("myApp", []); app.config( function($interpolateProvider) { $interpolateProvider.startSymbol('[['); $interpolateProvider.endSymbol(']]'); }) .config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.xsrfCookieName = 'csrftoken'; $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; }]); app.controller("myCtrl", ["$scope", "service", function($scope, service) { $scope.result = ""; $scope.my_submit = function() { console.log($scope.username); console.log($scope.password); service.do_save_info($scope.username, $scope.password, function(response){ console.log(response); $scope.result = response.result; }); }; }]); service.js
app.service("service", ["$http", function($http) { this.do_save_info = function(username, password, callback) { $http({ method: 'POST', url: '/do_save_info', data: { 'username': username, 'password': password }, headers: {'Content-Type': undefined}, }).success(function(response){ callback(response); }); }; }]);
新聞熱點
疑難解答
