Django之提交表单与前后端交互的方法

Django之META与前后端交互

1 提交表单之GET

前端提交数据与发送
1)提交表单数据
2)提交JSON数据
后端的数据接收与响应
1)接收GET请求数据
2)接收POST请求数据
3)响应请求

GET 请求过程
前端通过ajax发起GET请求,json格式数据
var data = {
  "name": "test",
  "age": 1
};
$.ajax({
  type: 'GET',
  url: /your/url/,
  data: data, # 最终会被转化为查询字符串跟在url后面: /your/url/?name=test&age=1
  dataType: 'json', # 注意:这里是指服务端返回json格式的数据
  success: function(data) { # 这里的data就是json格式的数据
  },
  error: function(xhr, type) {
  }
});
后端接受GET请求数据
name = request.GET.get('name', '')
age = int(request.GET.get('age', '0')) 

2 提交表单之POST

方式一:

前端发送POST请求:
var data = {}
# 如果页面并没有表单,只是input框,请求也只是发送这些值,那么可以直接获取放到data中
data['name'] = $('#name').val()
# 如果页面有表单,那么可以利用jquery的serialize()方法获取表单的全部数据
data = $('#form1').serialize();
$.ajax({
  type: 'POST',
  url: /your/url/,
  data: data, #request Header中默认是Content-Type:application/x-www-form-urlencoded
  dataType: 'json', # 注意:期望服务器返回的数据类型
  success: function(data) { # 这里的data就是json格式的数据
  },
  error: function(xhr, type) {
  }
});
注: ajax中没有指明content-type类型,请求头中默认是Content-Type:application/x-www-form-urlencoded,因此参数会编码为 name=xx&age=1 提交到后端,后端作为表单数据处理

后端接受请求表单数据:
name = request.POST.get('name', '')
age = int(request.POST.get('age', '0')) 

方式二:

前端通过POST提交JSON数据
# POST一个json数据
var data = {
  “name”: "test",
  "age", 1
}
$.ajax({
  type: 'POST',
  url: /your/url/,
  data: JSON.stringify(data), # json对象转化为字符串
  #request Header注明content-type:'application/json; charset=UTF-8'
  contentType: 'application/json; charset=UTF-8',
  dataType: 'json', # 注意:期望服务端返回json格式的数据
  success: function(data) { # 这里的data就是json格式的数据
  },
  error: function(xhr, type) {
  }
});
注: 如果要给后端传递json数据,就需要增加content-type参数,告诉后端,传递过来的数据格式,并
且需要将data转为字符串进行传递。实际上,服务端接收到后,发现是json格式,做的操作就是将字符串转为json对象。
另外,不转为字符串,即使加了content-type的参数,也默认会转成name=xx&age=1,使后端无法获取正确的json。

后端接受数据:
data = request.get_json()
另外,如果前端提交的数据格式不能被识别,可以用request.get_data()接收数据。

3 request.META组成

  request.META是python中一个字典,包含了本次所有HTTP请求的Header信息,比如ip,浏览器
  Agent。注意Header信息的完整列表取决于用户所发送的Header信息与服务端设置的header信息,常见的键值对有:
(1) HTTP_USER_AGENT,用户浏览器的user-agent字符串,例如: "Mozilla/5.0 (X11; U; Linux i686; fr-FR; rv:1.8.1.17) Gecko/20080829 Firefox/2.0.0.17" .
(2) REMOTE_ADDR客户端ip,如"12.345.67.89" ,如果申请是经过代理服务器的话,那么它可能是
以逗号分割的多个IP地址,如:"12.345.67.89,23.456.78.90")

  request.META是python一个普通字典,当键不存在时,访问会触发一个KeyError异常。一般采用
  try/execpt语句或者用python中get()方法来处理,设置默认返回,友好的响应客户端。

4 request.META调用设计

(1)要获取用户浏览器信息,写法通常可以:
def ua_display(request):
  info = request.META.get('HTTP_USER_AGENT', 'unknown')
  return HttpResponse("Your browser is %s" % info)

 (2) 采用try/execpt语句防止阻塞程序
def ua_display_2(request):
  try:
    info = request.META['HTTP_USER_AGENT']
  except KeyError:
    info = 'unknown'
  return HttpResponse("Your browser is %s" % info)

(3) 想要看META中具体有哪些数据,采用python字典获取键值items方法
values = request.META.items()
info = []
for k,v in values:
  info.append('<tr><td>%s</td><td>%s</td></tr>' % (k, v))

(4)
      CONTENT_LENGTH  文本长度
      CONTENT_TYPE  数据类型
      HTTP_ACCEPT_ENCODING  编码
      HTTP_ACCEPT_LANGUAGE  语言
      HTTP_REFERER  引用页,如果有的话
      HTTP_USER_AGENT 客户机用户代理字符串
      QUERY_STRING 查询字符串,单一的未解析的字符串
      REMOTE_ADDR  客户机IP地址
      REMOTE_HOST  客户机hostname
      REQUEST_METHOD 请求方式,比如 GET 或 POST
      SERVER_NAME 服务器 hostname
      SERVER_PORT 服务器端口

信息如下:
ALLUSERSPROFILE C:\ProgramData
COMMONPROGRAMFILES C:\Program Files\Common Files
COMSPEC C:\windows\system32\cmd.exe
CONFIGSETROOT  C:\windows\ConfigSetRoot
CONTENT_LENGTH
CONTENT_TYPE  text/plain
CSRF_COOKIE 8dLJLZyBH801ba24VdzYqJ81b5nqTxh0
DJANGO_SETTINGS_MODULE PythonProject.settings
FP_NO_HOST_CHECK  NO
GATEWAY_INTERFACE  CGI/1.1
HOMEDRIVE  C:
HTTP_ACCEPT text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
HTTP_ACCEPT_ENCODING  gzip,deflate,sdch
HTTP_ACCEPT_LANGUAGE  zh-CN,zh;q=0.8
HTTP_CONNECTION keep-alive
HTTP_COOKIE csrftoken=8dLJLZyBH801ba24VdzYqJ81b5nqTxh0; sessionid=1rf6hmdw7k0zzsg8q3q1lw2j75gmoood
HTTP_HOST  127.0.0.1:8000
HTTP_USER_AGENT Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
NUMBER_OF_PROCESSORS  4
OS Windows_NT
PATH  E:\Python;E:\Python\Scripts;C:\windows\system32;E:\Python
PATHEXT .COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH;.MSC
PATH_INFO  /display_meta/
PROCESSOR_ARCHITECTURE AMD64
PROCESSOR_IDENTIFIER  Intel64 Family 6 Model 42 Stepping 7, GenuineIntel
PROCESSOR_LEVEL 6
PROCESSOR_REVISION 2a07
PROMPT $P$G
PSMODULEPATH  C:\windows\system32\WindowsPowerShell\v1.0\Modules\
PUBLIC C:\Users\Public
QUERY_STRING
REMOTE_ADDR 127.0.0.1
REMOTE_HOST
REQUEST_METHOD GET
RUN_MAIN  true
SERVER_PROTOCOL HTTP/1.1
SERVER_SOFTWARE WSGIServer/0.1 Python/2.7.5
SESSIONNAME Console
SHIM_MCCOMPAT  0x810000001
WINDOWS_TRACING_FLAGS  3
WINDOWS_TRACING_LOGFILE C:\BVTBin\Tests\installpackage\csilogfile.log
wsgi.errors ', mode 'w' at 0x00000000025C6150>
wsgi.file_wrapper  wsgiref.util.FileWrapper
wsgi.input
wsgi.multiprocess  False
wsgi.multithread  True
wsgi.run_once  False
wsgi.url_scheme http
wsgi.version  (1, 0)

以上这篇Django之提交表单与前后端交互的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 在Django同1个页面中的多表单处理详解

    快速上手Django实现项目 近期公司在做1个海淘的项目,APP为pylot.由于时间比较赶,加上隔壁那哥们不在,只能自己挑大梁了.结果,当项目做出来之后,被领导狠狠的批了一顿,说怎么用django写,你能解决Django的内存问题吗,你能解决并发的问题吗?Django那么重. 然后我只好回答说,正是因为它重,所以人家拿来写大型项目.虽然这里不是为了上面这2个问题的,而是来说下如何快速开发原型的问题. 对于Django这样基于模型的Web框架,实话说真的解决了很多繁琐的工作.由于它1个模型对应1

  • django实现前后台交互实例

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

  • Python中使用django form表单验证的方法

    一. django form表单验证引入 有时时候我们需要使用get,post,put等方式在前台HTML页面提交一些数据到后台处理例 ; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form</title> </head> <body> <div> <for

  • Django之提交表单与前后端交互的方法

    Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请求 GET 请求过程 前端通过ajax发起GET请求,json格式数据 var data = { "name": "test", "age": 1 }; $.ajax({ type: 'GET', url: /your/url/, data: dat

  • Ajax提交表单页面刷新很快的解决方法

    注:使用ajax 提交表单时 type类型最好不用submit 用button合适 <form> <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3"> <input type="button" class="btn btn-info" value="重置" onclick="return resetaa()">

  • form.submit()不能提交表单的错误原因及解决方法

    直接上代码把: <div id="register"> <h4>会员注册</h4> <div class="formdiv"> <form method="post" action="register.php?action=register" name="register" id="registerForm"> <dl&g

  • 利用Node.js+Koa框架实现前后端交互的方法

    前言 对于一个前端工程师来说不仅仅要会前端的内容,后端的技术也需要熟练掌握.今天我就要通过一个案例来描述一下前端是如何和后端进行数据交互的. koa 是由 Express 原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的 Web 框架.使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率.koa 不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手. 准备工作 首先

  • Ajax提交表单时验证码自动验证 php后端验证码检测

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> <head> <title>验证码提交自验证</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta htt

  • 解决Django提交表单报错:CSRF token missing or incorrect的问题

    1.在Django提交表单时报错:Django提交表单报错: CSRF token missing or incorrect 具体报错页面如下: 2.有道词典翻译后如下: 通常,当存在真正的跨站点请求伪造时,或者Django的CSRF机制没有被正确使用时,就会出现这种情况.至于邮递表格,你须确保: 您的浏览器正在接受cookie. 视图函数将一个请求传递给模板的呈现方法. 在模板中,每个POST表单中都有一个{% csrf_token %}模板标记,目标是一个内部URL. 如果您没有使用Csrf

  • JS实现提交表单前的数字及邮箱校检功能

    个人觉得一个工程中让用户提交表单时,用户提交的数据类型及内容不确定度都很大,用户不一定会完全理解设计者意思.所以提交表单前的校检是必须的,这里简单分享几个校检方法,本人新手,还请多多指教. <script type="text/javascript"> function toVaild(){ var age = document.getElementById("age").value; var email = document.getElementByI

  • 自定义django admin model表单提交的例子

    如下所示: 希望可以从对admin提交的密码加密,并验证电话号码均为数字. 查看admin.py from django.contrib import admin class courseAdmin(admin.ModelAdmin) 我们自定义的管理类,继承与admin.ModelAdmin 查看对应admin模块对应源码 __init__.py from django.contrib.admin.options import ( HORIZONTAL, VERTICAL, ModelAdmi

  • Python django搭建layui提交表单,表格,图标的实例

    利用layui制作与众不同的感谢表单,表格 layui极大的提高了前端开发效率,它极具个性的样式等等都非常吸引人,接下来我将为大家展示如何利用Python的django框架与layui制作极富个性的表单与数据表格 注:忽略创建项目,配置文件,若这部分内容不太明白,参考教你使用Django搭建一个基金模拟交易系统,里面会教你从项目创建到最终运行的完整流程. 第一步:在templates目录下新建一个index.html文件(文件内容根据自己的业务需求在layui官网复制即可),同时改变其布局只需将

  • 原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f

随机推荐