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中给List添加元素的4种方法分享
Nov 28 Python
在Python中利用Pandas库处理大数据的简单介绍
Apr 07 Python
Python数据分析之如何利用pandas查询数据示例代码
Sep 01 Python
Python reduce()函数的用法小结
Nov 15 Python
终端命令查看TensorFlow版本号及路径的方法
Jun 13 Python
详解python如何在django中为用户模型添加自定义权限
Oct 15 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
Dec 05 Python
Python2和Python3之间的str处理方式导致乱码的讲解
Jan 03 Python
Python实现的ftp服务器功能详解【附源码下载】
Jun 26 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
Feb 24 Python
python IDLE添加行号显示教程
Apr 25 Python
python解包概念及实例
Feb 17 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去除HTML标签实例
2013/11/06 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
Javascript----文件操作
2007/01/18 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
python 检查文件mime类型的方法
2018/12/08 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
Python模块相关知识点小结
2020/03/09 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
Java软件工程师综合面试题笔试题
2013/09/08 面试题
矫正人员思想汇报
2014/01/08 职场文书
我爱我家教学反思
2014/05/01 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
会议主持词开场白
2015/05/28 职场文书
Python+tkinter实现高清图片保存
2022/03/13 Python