django9-ajax
1.ajax
局部刷新 ,不可能每次提交请求刷新整个页面
2.ajax实例
在不刷新整个的情况下完成计算器 ,ajax的post需要添加csrftoken
1)设置一个组件ajaxcsrf.html ,这个是通用的模板用于ajax的csrf的校验使用
{% load static %}
<script src="{% static 'jquery.min.js' %}"></script>
<script>
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
} var csrftoken = getCookie('csrftoken'); function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
} $.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
</script>
2)compute.html 注意的地方1.js文件放在最前面 2.jq选择id选择器不要写成name
选择器选中按钮--->绑定事件--->事件函数触发$.ajax
url #ajax的请求地址
type #ajax的请求类型
data #字典存储ajax发送到后端的数据
sucess:function() {} #执行成功后的操作
error:function() {} #执行错误后的操作
前端的数据类型与后端数据类型不一致 ,可以通过json格式字符串的方式通信 ,转换为自己的数据类型 ,尤其是list与dict类型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="/static/js/jquery.js"></script> <input type="text" name="num1" id="a">+
<input type="text" name="num2" id="b">=
<input type="text" name="num3" id="c">
<button id='b1'>加法</button>
<br>
<input type="text">
{% include 'ajaxcsrf.html' %}
<script>
$('#b1').click(function () {
$.ajax({
url: '/app1/compute/',
type: 'post',
data: {
num1: $('#a').val(),
num2: $('#b').val(),
lst: JSON.stringify(['game1','game2']) ##前端数据序列化传给后端!!!!!!!!
},
success: function (res) {
console.log(res);
$('#c').val(res);
}
})
});
</script>
</body>
</html>
3)views.py和url
url(r'compute/', views.compute, name='compute'),
def compute(request):
if request.method == 'POST':
a = request.POST.get('num1')
b = request.POST.get('num2')
c = json.loads(reqeust.POST.get('lst')) ##将前端给的json格式的str转换成py的数据类型
print(a,b)
return HttpResponse(int(a)+int(b))
return render(request, 'compate.html')
django9-ajax的更多相关文章
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- Ajax及跨域
概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...
- 一个粗心的Bug,JSON格式不规范导致AJAX错误
一.事件回放 今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...
- ABP文档 - Javascript Api - AJAX
本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...
- ajax异步请求
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
- 调用AJAX做登陆和注册
先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...
- Ajax 概念 分析 举例
Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...
- ajax
常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...
- 学习笔记之MVC级联及Ajax操作
由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...
- javascript表单的Ajax 提交插件的使用
Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...
随机推荐
- SpringBoot2.0 整合 FastDFS 中间件,实现文件分布式管理
本文源码:GitHub·点这里 || GitEE·点这里 一.FastDFS简介 1.FastDFS作用 FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步 ...
- Java入门系列之集合ArrayList源码分析(七)
前言 上一节我们通过排队类实现了类似ArrayList基本功能,当然还有很多欠缺考虑,只是为了我们学习集合而准备来着,本节我们来看看ArrayList源码中对于常用操作方法是如何进行的,请往下看. A ...
- ASP.NET MVC5基础 – MVC文件架构
创建MVC项目 首先,我们使用Visual Studio2019创建一个MVC架构的应用程序.步骤如下:首先打开VS2019,在启动页选择[创建新项目].然后选择创建 ASP.NET Web 应用程序 ...
- c#中的Nullable(可空类型)
在C#中使用Nullable类型(给整型赋null值的方法) 在C#1.x的版本中,一个值类型变量是不可以被赋予null值的,否则会产生异常.在C#2.0中,微软提供了Nullable类型,允许用它定 ...
- Flask 教程 第六章:个人主页和头像
本文翻译自 The Flask Mega-Tutorial Part VI: Profile Page and Avatars 这是Flask Mega-Tutorial系列的第六部分,我将告诉你如何 ...
- Thymeleaf对象的使用:字符串对象
Thymeleaf主要使用 org.thymeleaf.expression.Strings 类处理字符串,在模板中使用 #strings 对象来处理字符串. 开发环境:IntelliJ IDEA 2 ...
- PHP 部分语法(二)
array() 创建数组: 1.数值数组:带数字 ID 键的数组 2.关联数组:带有指定键的数组,键关联一个值 3.多维数组:包含一个或多个数组的数组 $arr = array("Hello ...
- SQL Prompt提示和SQL默认智能提示冲突解决
- 9. java API使用 - Scanner类
一.API概述和使用 1. 概述 API(应用程序编程接口).Java API是一本程序员字典,是JDK提供给我们使用的类的说明文档.这些类将底层的代码实现封装了起来,我们不需要关心这些类是如何实 ...
- 201871010123-吴丽丽 《面向对象程序设计(Java)》第十六周学习总结
201871010123-吴丽丽 <面向对象程序设计(Java)>第十六周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...