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 相关文章推荐
初步剖析C语言编程中的结构体
Jan 16 Python
Python实现随机生成有效手机号码及身份证功能示例
Jun 05 Python
Python设计模式之门面模式简单示例
Jan 09 Python
numpy判断数值类型、过滤出数值型数据的方法
Jun 09 Python
Python绘制正余弦函数图像的方法
Aug 28 Python
使用PyQt4 设置TextEdit背景的方法
Jun 14 Python
Python中print函数简单使用总结
Aug 05 Python
Python学习笔记之Zip和Enumerate用法实例分析
Aug 14 Python
python selenium循环登陆网站的实现
Nov 04 Python
Python面向对象魔法方法和单例模块代码实例
Mar 25 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
Oct 15 Python
最新pycharm安装教程
Nov 18 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如何通过AJAX方式实现登录功能
2015/11/23 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
Python中的列表知识点汇总
2015/04/14 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
python实现复制文件到指定目录
2019/10/16 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
中国制造网:Made-in-China.com
2019/10/25 全球购物
汽车机修工岗位职责
2014/03/06 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
创业计划之特色精品店
2019/08/12 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书