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

作者:金小金~ 时间:2022-07-09 02:21:57 

一.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>

总结

来源:https://blog.csdn.net/weixin_42161670/article/details/116611819

标签:ajax,post,传参
0
投稿

猜你喜欢

  • Python3安装psycopy2以及遇到问题解决方法

    2022-12-19 15:41:26
  • Oracle故障处理Rman-06207&Rman-06214的方法

    2023-07-08 01:26:29
  • Python time三种时间转换小结

    2022-05-15 18:38:20
  • 基于Python实现智能停车场车牌识别计费系统

    2021-05-23 07:44:22
  • 三种SQL分页查询的存储过程代码

    2012-01-05 19:31:32
  • python scatter散点图用循环分类法加图例

    2021-07-26 01:44:01
  • 在pyqt5中展示pyecharts生成的图像问题

    2023-10-17 10:59:46
  • python如何使用contextvars模块源码分析

    2021-12-03 21:55:21
  • go reflect要不要传指针原理详解

    2024-04-26 17:27:14
  • Pyside2中嵌入Matplotlib的绘图的实现

    2021-09-15 22:34:03
  • python中使用while循环的实例

    2022-12-25 00:23:57
  • python基础编程小实例之计算圆的面积

    2023-06-07 06:33:14
  • js实时获得服务器上时间

    2008-11-25 13:55:00
  • Vue3中如何使用异步请求示例详解

    2024-04-27 16:04:56
  • python实现连续变量最优分箱详解--CART算法

    2023-01-15 16:33:05
  • python实现图像识别的示例代码

    2022-09-11 04:48:40
  • 网站508规范(译)

    2008-04-03 13:26:00
  • PyCharm代码格式调整方法

    2021-05-21 14:59:32
  • mysql ERROR 1045 (28000)问题的解决方法

    2024-01-16 23:24:32
  • CSS Sprites对CSS布局的意义、优点和缺点介绍

    2008-07-14 07:22:00
  • asp之家 网络编程 m.aspxhome.com