django ajax 表单联动,Django ajax方法提交表单，及后端接受数据

前台代码：

{% block content %}

{% for blog in blog %}

{% csrf_token %}

标题

正文

{{blog.body}}

保存

{% endfor %}

js代码：

$(function(){

$('#submit').on('click', function(){

var id = $("#blog-id").val()

var title = $("#blog-title").val()

body是tinymce富文本编辑器，不能这样获取

var body= tinyMCE.getInstanceById('blog-body').getBody().innerHTML;//谷歌中可以获取到body,火狐获取不到

$.ajax({

cache: false,

type: "POST",

url:"/sub_article/",

data:{'title': title, 'body': body,'blogId':id},

dataType:"json",

async: true,

beforeSend:function(xhr, settings){

xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");

},

success: function(data) {

if(data.status == 'success'){

console.log(data)

alert("提交成功");

}else {

alert("fail");

}

},

});

});

})

views：

def sub_article(request):

# if request.is_ajax:

if request.method == 'POST':

# 获取ajax传过来的参数值

data = request.POST

id = data.get('blogId')

print 'id:%s' % id

title = data.get('title')

body = data.get('body')

# body = request.POST.get("blog-body")#此种方式不能获取到值

print "title:%s" % title

print "body:%s" % body

BlogPost.objects.filter(id=int(id)).update(title=title)

BlogPost.objects.filter(id=int(id)).update(body=body) # 更改数据

# BlogPost.objects.create(title=title)

# BlogPost.objects.create(body=body)#提交时插入两条半截数据很可能是这里分开执行引起的，需要通过id来准确定位修改哪条数据

return HttpResponse('{"status":"success"}', content_type='application/json')

else:

return HttpResponse('{"status":"fail", "msg":"fail hhahh"}', content_type='application/json')

接收参数

1.GET 方式

$.ajax({

url:'/hello/getTest',

type:'GET',

data:{'a':3333,'b':444},

success:function(data){

alert(data.message);

}

})

views->参数解析和用数据字典的方式返回json 数据(跨域名请求数据，则使用 jsonp字符串)

```

def getTest(request):

data = request.GET

print(data)

a = data.get('a')

b = data.get('b')

response_data = {}

response_data['result'] = 's'

response_data['message'] = a+b

return HttpResponse(json.dumps(response_data), content_type="application/json")

```

function postTest() {

$.ajax({

url:'/hello/postTest',

type:'POST',

data:{'a':3333,'b':444},

success:function(data){

alert(data.message);

}

})

}

views-> 引入from django.views.decorators.csrf import csrf_exempt，并且增加注解@csrf_exempt，目的是避开CSRF检查

@csrf_exempt

def postTest(request):

data = request.POST

print(data)

a = data.get('a')

b = data.get('b')

response_data = {}

response_data['result'] = 's'

response_data['message'] = a+b

return JsonResponse(response_data)

注意点:

post 方式有避开CSRF检查，具体不回避CSRF检查的方式需要再研究

返回Json的方式有两种

$(function(){

$('#submit').on('click', function(){

var id = $("#blog-id").val()

var title = $("#blog-title").val()

body是tinymce富文本编辑器，不能这样获取

var body= tinyMCE.getInstanceById('blog-body').getBody().innerHTML;//谷歌中可以获取到

$.ajax({

cache: false,

type: "POST",

url:"/sub_article/",

data:{'title': title, 'body': body,'blogId':id},

dataType:"json",

async: true,

beforeSend:function(xhr, settings){

xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");

},

success: function(data) {

if(data.status == 'success'){

console.log(data)

alert("提交成功");

}else {

alert("fail");

}

},

});

});

})

jquery中$.ajax方法提交表单

function postdata(){                        //提交数据函数 $.ajax({                                //调用jqu ...

Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)

本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html &l ...

jquery 通过submit()方法 提交表单示例

jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码

首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...

使用ajax异步提交表单

虽然这篇文章的标题是提交表单,但是主要的难点在于使用ajax提交文本域的内容, 在工作中的经常会需要ajax跨域的问题,通常的需求使用jsonp就可以得到解决,但是当前项目中有一个图片服务器,客户端需 ...

jquery ajax异步提交表单数据

使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

关于ajax直接提交表单jQuery .validator验证不起作用问题

之前用$.ajax(function(){});直接提交表单,而表单验证不通过也能提交. $(document).ready(function(){ $.ajax({       url:" ...

Asp.net Mvc Ajax.BeginForm提交表单

之前Mvc中一直用Html.BeginForm提交表单,即如下: @using (Html.BeginForm("Add", "News", FormMetho ...

tp5中ajax方式提交表单

用ajax提交表单,迅速,快捷,实现页面无刷新提交表单.

&lt ...

随机推荐

sass菜鸟教程

1.安装sass 在安装sass前需要安装ruby,下载ruby时要注意自己电脑是32位还是64位,下载好正常安装,但注意一下:要勾选下图这一项,添加环境变量(安装过JDK的朋友应该知道环境变量) 下 ...

逆序数2 HDOJ 1394 Minimum Inversion Number

题目传送门 /* 求逆序数的四种方法 */ /* 1. O(n^2) 暴力+递推 法:如果求出第一种情况的逆序列,其他的可以通过递推来搞出来,一开始是t[1],t[2],t[3]....t[N] 它的 ...

oracle 存储过程发邮件

CREATE OR REPLACE PROCEDURE PROCSENDEMAIL(P_TXT       VARCHAR2,                                      ...

How can I create an Asynchronous function in Javascript?

哈哈:)我的codepen 的代码笔记是:http://codepen.io/shinewaker/pen/eBwPxJ --------------------------------------- ...

js实现前端下载文件

在前端下载文本格式的文件时,可采用下面的方式: (1)创建基于文件内容的Blob对象: (2)通过URL上的createObjectURL方法,将blob对象转换成一个能被浏览器解析的文件地址. (3 ...

C# 反射获取属性类型及属性值，两个实体转换

一.两个实体数据转换 /// /// 为属性赋值 /// ///

解决 dotNetZip 解压乱码的问题，支持ZIP分卷解压缩

using (ZipFile zip = ZipFile.Read("D:\\test\\2007.zip",System.Text.Encoding.Default)) { fo ...

DataFrame 列运算

import pandas as pd import StringIO table_buffer = StringIO.StringIO('''a b 2007-01-08 0.786667 270 ...

Types方法之isSameType-isSuperType-isSubType

4.isSameType() 方法 /** * Is t the same type as s? */ public boolean isSameType(Type t, Type s) { retu ...

160331、使用@Controller注解为什么要配置<mvc:annotation-driven />

为了解决静态资源访问的问题,servlet改成了拦截所有请求,即/,并添加了默认的servlet,这时候*.do请求不能被控制器捕捉了,页面错误为404.直到添加了