django学习之ajax post传参的2种格式实例


Posted in Python onMay 14, 2021

一.ajax介绍

1、ajax的含义

Ajax全称“Async Javascript And XML”即:异步的javascript和XML。它是一种称谓,并不指代某项具体的技术,准确来说是一系列技术的集合.现在,所有的无刷新操作都被称为“Ajax”.

2、使用ajax的好处:

使用ajax避免了整页数据的刷新,也减少了请求等待的时间,提高了用户体验.

二.ajax传参的两种格式

假设有如下表单,需要将这些表单用ajax传参的方式传给后台,该怎么做呢…

django学习之ajax post传参的2种格式实例

我们知道ajax传参的格式为$.post(“地址”,参数,function(返回值){}),套用这个格式进行传参,有以下两种方法:

方法一:提交表单中的部分字段

我们可以获取用户名,密码等内容,将其拼接成一个字典(想传什么就将其拼接成字典格式,没有特殊限制,你甚至可以单独的只传一个用户名),将其作为参数传给后台

例:

{‘username':username,‘password':password,‘csrfmiddlewaretoken':csrf}

{‘username':username‘}

{‘password':password}

关于csrf是预防跨站攻击的内容,你可以移步djanjo之csrf防跨站攻击作下了解

接下来看看代码中是如何实现的,重点关注带有下方标记的代码

{# ?ajax #}

{# ?post提交 #}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    {# 引用jquery #}
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form ation="" method="post">
    {# 防止跨站攻击 #}
    {% csrf_token %}
    用户名:<input type="text" name="username"><br>
    密码:<input type="text" name="password"><br>
<!--    {# 表单提交 #}-->
<!--    <input type="submit">-->

<!--    {# ajax提交 #}-->
    <input type="button" value="注册" id="button">
</form>
</body>
</html>
<script>
	{# ?ajax #}
    $("#button").click(function(){
        username = $("[name='username']").val();
        password = $("[name='password']").val();
        csrf = $("[type='hidden']").val();
        console.log(username,password,csrf);

        {# ?post提交 #}
        {# $.post("地址",{参数},function(返回值){}) #}
        $.post("/user/register/",{'username':username,'password':password,'csrfmiddlewaretoken':csrf},function(data){
            console.log(data)
        })

    });

</script>

方法二:提交表单中的所有字段

console.log($(“form”).serialize()

serialize是把表单中的字段序列化,弄成get的请求的字符串格式,将其作为参数传给后台

值得注意的是这里就不能像方法一里那样想传什么参数就传什么参数了,而是表单中所有的字段都会被纳为请求的字符串格式

接下来看看代码中是如何实现的,重点关注带有下方标记的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    {# 引用jquery #}
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form ation="" method="post">
    {# 防止跨站攻击 #}
    {% csrf_token %}
    用户名:<input type="text" name="username"><br>
    密码:<input type="text" name="password"><br>
<!--    {# 表单提交 #}-->
<!--    <input type="submit">-->

<!--    {# ajax提交 #}-->
    <input type="button" value="注册" id="button">
</form>
</body>
</html>
<script>
	{# ?ajax #}
    $("#button").click(function(){
        console.log($("form").serialize());

        {# ?post提交 #}
        {# $.post("地址",{参数},function(返回值){}) #}
         $.post("/user/register/",console.log($("form").serialize()),function(data){
            console.log(data)
        })

    });

</script>

总结

到此这篇关于django学习之ajax post传参的文章就介绍到这了,更多相关django之ajax post传参内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
Python设计模式编程中Adapter适配器模式的使用实例
Mar 02 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
Sep 26 Python
python导出hive数据表的schema实例代码
Jan 22 Python
和孩子一起学习python之变量命名规则
May 27 Python
python实现排序算法解析
Sep 08 Python
老生常谈python中的重载
Nov 11 Python
Python多线程应用于自动化测试操作示例
Dec 06 Python
对python的unittest架构公共参数token提取方法详解
Dec 17 Python
如何用Python做一个微信机器人自动拉群
Jul 03 Python
关于django 1.10 CSRF验证失败的解决方法
Aug 31 Python
keras中的卷积层&amp;池化层的用法
May 22 Python
Python中tqdm的使用和例子
Sep 23 Python
Python djanjo之csrf防跨站攻击实验过程
python控制台打印log输出重复的解决方法
聊一聊python常用的编程模块
May 14 #Python
如何获取numpy array前N个最大值
May 14 #Python
使用pandas模块实现数据的标准化操作
pandas 实现将NaN转换为None
May 14 #Python
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
You might like
一个PHP的ZIP压缩类分享
2014/05/04 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
Python 元类使用说明
2009/12/18 Python
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
分析Python读取文件时的路径问题
2018/02/11 Python
python放大图片和画方格实现算法
2018/03/30 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
python实现图像拼接功能
2020/03/23 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
Python面试题集
2012/03/08 面试题
个人总结与自我评价
2014/09/18 职场文书
作文评语怎么写
2014/12/25 职场文书
Pygame如何使用精灵和碰撞检测
2021/11/17 Python