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使用xauth方式登录饭否网然后发消息
Apr 11 Python
python Django批量导入数据
Mar 25 Python
Python中的FTP通信模块ftplib的用法整理
Jul 08 Python
Python3实现购物车功能
Apr 18 Python
Django 配置多站点多域名的实现步骤
May 17 Python
python的pytest框架之命令行参数详解(上)
Jun 27 Python
Win10+GPU版Pytorch1.1安装的安装步骤
Sep 27 Python
Python实现图片识别加翻译功能
Dec 26 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
May 09 Python
Python中三维坐标空间绘制的实现
Sep 22 Python
python3中for循环踩过的坑记录
Dec 14 Python
python的列表生成式,生成器和generator对象你了解吗
Mar 16 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面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
详谈PHP编码转换问题
2015/07/28 PHP
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
python实现rest请求api示例
2014/04/22 Python
Python性能提升之延迟初始化
2016/12/04 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
Django如何自定义分页
2018/09/25 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
python3 map函数和filter函数详解
2019/08/26 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
圣诞节开幕词
2015/01/29 职场文书
2015年端午节活动方案
2015/05/05 职场文书
道歉的话怎么说
2015/05/12 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android
Redis实战高并发之扣减库存项目
2022/04/14 Redis