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的更多相关文章
	

    
						
  1. jQuery之ajax实现篇
		
    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
    
		
    2. 
						
  2. Ajax及跨域
		
    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...
    
		
    3. 
						
  3. 一个粗心的Bug，JSON格式不规范导致AJAX错误
		
    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json  ...
    
		
    4. 
						
  4. ABP文档 - Javascript Api - AJAX
		
    本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net  ...
    
		
    5. 
						
  5. ajax异步请求
		
    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
    
		
    6. 
						
  6. 调用AJAX做登陆和注册
		
    先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...
    
		
    7. 
						
  7. Ajax 概念 分析 举例
		
    Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...
    
		
    8. 
						
  8. ajax
		
    常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...
    
		
    9. 
						
  9. 学习笔记之MVC级联及Ajax操作
		
    由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...
    
		
    10. 
						
  10. javascript表单的Ajax 提交插件的使用
		
    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. linux命令--查找与帮助
			
    一.搜寻命令 1.whereis命令 whereis是搜索系统命令的命令,也就是说,whereis 命令不能搜索普通文件, 而只能搜索系统命令. 命令名称:whereis 英文原意:locate th ...
    
			
    2. 
						
  2. SpringBoot系列——Filter 过滤器
			
    前言 本文记录一下在SpringBoot项目中是如何使用Filter过滤器 代码.测试 Filter过滤器是servlet包下面的东西,因此我们不需要再额外引包 方法一 直接实现Filter接口,并使 ...
    
			
    3. 
						
  3. python   django-admin.py startproject xxx 错误：from django.core import management
			
    1. Python安装路径以及Python安装路径\Script文件夹,已经添加到PATH环境变量中. 2. 查看django 版本正常: import django print(django.__v ...
    
			
    4. 
						
  4. PHP mysqli_fetch_object MySQLi 函数
			
    定义和用法 mysqli_fetch_object - 返回结果集的当前行作为对象 版本支持 PHP4 PHP5 PHP7 不支持 支持 支持 语法 mysqli_fetch_object ( mys ...
    
			
    5. 
						
  5. Fundebug网站升级HTTP/2，真的变快了！
			
    作为新一代的HTTP协议,HTTP/2可以提高网站性能,优化用户体验,Fundebug也是时候升级HTTP/2了,虽然已经有点晚了. 升级HTTP/2是一件很简单的事情,改1行Nginx配置就好了,但 ...
    
			
    6. 
						
  6. FLUME NG的基本架构
			
    Flume简介 Flume 是一个cloudera提供的 高可用高可靠,分布式的海量日志收集聚合传输系统.原名是 Flume OG (original generation),但随着 FLume 功能 ...
    
			
    7. 
						
  7. Linux-3.14.12内存管理笔记【伙伴管理算法（2）】
			
    前面已经分析了linux内存管理算法(伙伴管理算法)的准备工作. 具体的算法初始化则回到start_kernel()函数接着往下走,下一个函数是mm_init(): [file:/init/main. ...
    
			
    8. 
						
  8. 自定义v-color指令
			
    在自定义指令的时候,和js行为有关的,最好就写在inserted中去,防止js代码不生效.和样似有关的操作放在bind中去Vue.direactive [d儿 Rai K T V] 没有s哈 < ...
    
			
    9. 
						
  9. 洛谷 P3373 【模板】线段树 2
			
    洛谷 P3373 [模板]线段树 2 洛谷传送门 题目描述 如题,已知一个数列,你需要进行下面三种操作: 将某区间每一个数乘上 xx 将某区间每一个数加上 xx 求出某区间每一个数的和 输入格式 第一 ...
    
			
    10. 
						
  10. LG4158 「SCOI2009」粉刷匠  线性DP
			
    问题描述 LG4158 题解 设\(opt[i][j][k]\)代表到\((i,k)\)刷了\(j\)次的方案数. 一开始DP顺序有点问题,调了很长时间. 务必考虑清楚DP顺序问题 \(\mathrm ...
    
			
    11.