django实现前后台交互实例

本文介绍了django实现前后台交互实例，分享给大家，希望对大家有所帮助

准备工作：

前端框架：AngularJS+bootstap

数据库：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);
    });
  };
}]);

后端代码：

urls.py

from django.conf.urls import patterns, include, url 

urlpatterns = patterns('app.views',
  url(r'^index$', 'index'),
  url(r'^/index$', 'index'),
  url(r'^$', 'index'),
  url(r'^/$', 'index'),
  url(r'^do_save_info$', 'do_save_info'),
)

views.py

from django.shortcuts import render_to_response
from django.template import RequestContext
from django.http import HttpResponse
from django.views.decorators.csrf import ensure_csrf_cookie, csrf_exempt
import json
import models 

# Create your views here.
@ensure_csrf_cookie
def index(request):
  return render_to_response('static/index.html',
    context_instance=RequestContext(request)) 

def do_save_info(request):
  result = {'result':'save success'}
  try:
    data = json.loads(request.body)
    username = data.get("username", None)
    password = data.get("password", None)
    models.do_save_info(username, password)
  except Exception, e:
    result['result'] = 'save error'
  return HttpResponse(json.dumps(result))

models.py

#!/bin/python
# -*- coding: utf-8 -*- 

import os
import sys
import sqlite3 

def do_save_info(username, password):
  db_path = os.path.normpath('/home/zhubao/Code/django_code/hello/db.sqlite3')
  try:
    conn = sqlite3.connect(db_path)
    sql = "insert into t_user(username, password) values('%s', '%s')" % (username, password)
    conn.execute(sql)
    conn.commit()
    conn.close()
    print 'save success...'
  except Exception, e:
    print '------', str(e)
    try:
      conn.close()
    except Exception, e:
      pass

t_user表结构：

create table t_user(username varchar(255), password varchar(255));

页面演示：

刚打开页面如下：

输入数据，点击保存：

后台查看数据库：

可以看到，已经保存在数据库里面了。

这只是个小示例，在此不考虑页面排版和安全性问题。。。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • django实现前后台交互实例

    django实现前后台交互实例

    本文介绍了django实现前后台交互实例,分享给大家,希望对大家有所帮助 准备工作: 前端框架:AngularJS+bootstap 数据库:sqlite3 前端代码: index.html <!DOCTYPE html> <html> <head> <link href="/WebApi/scripts/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow"

  • Layui前后台交互数据获取java实例

    Layui简介 Layui是一款适用于后台程序员的UI框架,学习成本低.Json数据格式交互前后台,并且也相当适用单页面开发.有兴趣的朋友可以看看layui官网. Layui前后台数据交互 layui有自己的一套特定的数据格式交互(这很重要),必须参数code:0,msg:"",count:数据size(int),data:"数据List".一般我们选择封装返回接收类. Layui前台js请求数据 其中 html代码 <link rel="style

  • Django 使用Ajax进行前后台交互的示例讲解

    本文要实现的功能是:根据下拉列表的选项将数据库中对应的内容显示在页面,选定要排除的选项后,提交剩余的选项到数据库. 为了方便前后台交互,利用了Ajax的GET和POST方法分别进行数据的获取和提交. 代码如下: <!--利用获取的数据进行表单内容的填充--> <script> $("#soft_id").change(function(){ var softtype=$("#soft_id").find("option:select

  • Django 后台带有字典的列表数据与页面js交互实例

    1.这里只是简单介绍一下Django的view如何跟js进行交互,首先,进入用户明细的时候会进入一个页面,叫用户信息表,里面包含了用户学习的课程和所得到的分数,每门课程对应一个分数,其中课程用下拉框依次显示,选择课程时动态显示课程的分数,django view部分代码如下: def user_info(request, userid): if request.method == "GET": user = User.objects.get(userid=userid) user_inf

  • mock.js模拟前后台交互

    mock.js模拟前后台交互

    本文实例为大家分享了mock.js模拟前后台交互的具体代码,供大家参考,具体内容如下 使用背景: vue项目 axios 使用详情: 1.首先安装 # 在项目中安装 npm install mockjs 2.在项目中使用 在项目中src文件夹下 新建mock文件夹 新建mock.js 和index.js文件 这里面用来生成基础的接口 项目结构截图: 数据 mock.js 文件 //-----------------mock.js------------------- // 引入mockjs im

  • python Django的web开发实例（入门）

    一.创建一个项目 如果这是你第一次使用Django,那么你必须进行一些初始设置.也就是通过自动生成代码来建立一个Django项目--一个Django项目的设置集,包含了数据库配置.Django详细选项设置和应用 特性配置,具体操作步骤如下所示. 1.新建Django项目 选择sqlite数据库 2.创建网站模块app 3.测试新建的模块是否正常 Validating models... 0 errors found March 12, 2014 - 10:26:53 Django version

  • django定期执行任务(实例讲解)

    要在django项目中定期执行任务,比如每天一定的时间点抓取数据,刷新数据库等,可以参考stackoverflow的方法,先编写一个manage.py命令,然后使用crontab来定时执行这个命令. 定制manage.py命令 app可以使用manage.py注册自己的命令,比如要在polls这个app中定制一个closepoll命令,要先向polls文件夹中添加一个management/commands的目录: polls/ __init__.py models.py management/

  • 基于Django的python验证码(实例讲解)

    基于Django的python验证码(实例讲解)

    验证码 在用户注册.登录页面,为了防止暴力请求,可以加入验证码功能,如果验证码错误,则不需要继续处理,可以减轻一些服务器的压力 使用验证码也是一种有效的防止crsf的方法 验证码效果如下图: 验证码视图 新建viewsUtil.py,定义函数verifycode 此段代码用到了PIL中的Image.ImageDraw.ImageFont模块,需要先安装Pillow(3.4.1)包, 详细文档参考 http://pillow.readthedocs.io/en/3.4.x/ Image表示画布对象

  • Angular2 组件交互实例详解

    1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间的交互方式主要有如下几种: l 使用输入型绑定,把数据从父组件传到子组件 l 通过 setter 拦截输入属性值的变化 l 使用 ngOnChanges 拦截输入属性值的变化 l 父组件监听子组件的事件 l 父组件与子组件通过本地变量互动 l 父组件调用 ViewChild l 父组件和子组件通过服

  • PHP JSON格式数据交互实例代码详解

    在PHP中解析JSON主要用到json_encode和json_decode两个PHP JSON函数,比PHP解析XML方便很多,下面详细介绍下PHP JSON的使用.JSON基础介绍 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON主要有两种结构: "名称/值"对的集合,在PHP中可以理解为关联数组 (associative array). 值的有序列表(An ordered list of values).在PHP中可以理解为

随机推荐