{% load staticfiles %}
devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

django中ajax发送post请求的几种方法_django ajax post

作者：IT小白 | 2024-03-12 13:47:09

赞

踩

django ajax post

一：ajax请求图例：

 

二：views.py中的代码

  1. def login_ajax_handle(request):
  2.     """ajax登录处理"""
  3.     # 获取用户名和密码
  4.     u = request.POST.get("username")
  5.     p = request.POST.get("password")
  6.     # 进行校验
  7.     if u == "smart" and p == "123":
  8.         # 用户名和密码正确
  9.         # ajx请求返回的就是json数据,不能返回页面或重定向
  10.         return JsonResponse({"res": 1})
  11.     else:
  12.         # 用户名和密码错误
  13.         return JsonResponse({"res": 0})

 

三：html中的代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     {% load staticfiles %}
  5.     <meta charset="UTF-8">
  6.     <title>登录页面</title>
  7.     <script src="{% static 'js/jquery-1.12.4.js' %}"></script>
  8.     <script>
  9.         $(function () {
  10.             $("#btnLogin").click(function () {
  11.                 // 获取用户名和密码
  12.                 var u = $("#username").val();
  13.                 var p = $("#password").val();
  14.                 // 此参数需要传递给后端,否则会csrf禁止,报403错误
  15.                 var csrf = $('input[name="csrfmiddlewaretoken"]').val();
  16.                 // 发起ajax请求
  17.                 $.ajax({
  18.                     url: "/login_ajax_handle/",  // 请求的地址
  19.                     type: "post",  // 请求方式
  20.                     // 请求时传递过去的数据
  21.                     data:{"username": u, "password": p, 'csrfmiddlewaretoken': csrf},
  22.                     dataType: "json",  // 返回的数据格式
  23.                     async: true,  // 异步的ajax
  24.                 }).success(function (data) {
  25.                     if(data.res == 1){
  26.                         // 请求成功实现页面跳转
  27.                         window.location.href = "/index/";
  28.                     }
  29.                     else if(data.res == 0){
  30.                         // 请求失败，显示错误信息
  31.                         $("#errmsg").show();
  32.                         $("#errmsg").html("用户名或密码错误");
  33.                     }
  34.  
  35.                 })
  36.             })
  37.         })
  38.     </script>
  39.     <style>
  40.         #errmsg{
  41.             display: none;
  42.             color: red;
  43.             font-size: 8px;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48. {# post请求必须加上下面这个变量 #}
  49. {% csrf_token %}
  50. <div>
  51.     用户名: <input type="text" id="username"><br>
  52.     密&nbsp;&nbsp;&nbsp;码: <input type="password" id="password"><br>
  53.     <div id="errmsg"></div>
  54.     <input type="button" id="btnLogin" value="登录">
  55. </div>
  56. </body>
  57. </html>

四、第二种ajax发送post请求案例：

直接获取表单中的所有数据，然后发送请求，表单中记得写上{% csrf_token %}即可，比上面一种要简单一些

（1） html中的代码

  1. <div class="right companyright">
  2.                 <div class="head">我要学习</div>
  3.                 <form class="rightform" id="jsStayForm">
  4.                     {% csrf_token %}
  5.                     <div>
  6.                         <img src="{% static 'images/rightform1.png' %}"/>
  7.                         <input type="text" name="name" id="companyName" placeholder="名字" maxlength="25"/>
  8.                     </div>
  9.                     <div>
  10.                         <img src="{% static 'images/rightform2.png' %}"/>
  11.                         <input type="text" name="mobile" id="companyMobile" placeholder="联系电话"/>
  12.                     </div>
  13.                     <div>
  14.                         <img src="{% static 'images/rightform3.png' %}"/>
  15.                         <input type="text" name="course_name" id="companyAddress" placeholder="课程名" maxlength="50"/>
  16.                     </div>
  17.                     <p class="error company-tips" id="jsCompanyTips"></p>
  18.                     <input class="btn" type="text" id="jsStayBtn" value="立即咨询 >"/>
  19.                 </form>
  20.             </div>

（2） js代码

  1. $(function () {
  2.             $(document).ready(function () {
  3.                 $('#jsStayBtn').on('click', function () {
  4.                     $.ajax({
  5.                         cache: false,
  6.                         type: "POST",
  7.                         url: "{% url 'org:add_ask' %}",
  8.                         data: $('#jsStayForm').serialize(),
  9.                         async: true,
  10.                         success: function (data) {
  11.                             if (data.status == 'success') {
  12.                                 $('#jsStayForm')[0].reset();
  13.                                 $('#jsCompanyTips').html("");
  14.                                 setTimeout(function () {
  15.                                     alert("提交成功")
  16.                                 }, 200);
  17.                             } else if (data.status == 'fail') {
  18.                                 $('#jsCompanyTips').html(data.msg)
  19.                             }
  20.                         },
  21.                     });
  22.                 });
  23.             });
  24.         })

五. 第三种发送ajax发送Post请求的方法

（1）js代码

  1. <script type="text/javascript">
  2.         //收藏分享
  3.         function add_fav(current_elem, fav_id, fav_type) {
  4.             $.ajax({
  5.                 cache: false,
  6.                 type: "POST",
  7.                 url: "{% url 'ope:add_fav' %}",
  8.                 data: {'fav_id': fav_id, 'fav_type': fav_type},
  9.                 async: true,
  10.                 beforeSend: function (xhr, settings) {
  11.                     xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
  12.                 },
  13.                 success: function (data) {
  14.                     if (data.status == 'fail') {
  15.                         if (data.msg == '用户未登录') {
  16.                             window.location.href = "{% url 'users:login' %}";
  17.                         } else {
  18.                             alert(data.msg)
  19.                         }
  20.  
  21.                     } else if (data.status == 'success') {
  22.                         current_elem.text(data.msg)
  23.                     }
  24.                 },
  25.             });
  26.         }
  27.  
  28.         $(document).ready(function () {
  29.             $('#jsLeftBtn').on('click', function () {
  30.                 add_fav($(this), {{ course.id }}, 1);
  31.             });
  32.         });
  33.  
  34.         $(document).ready(function () {
  35.             $('#jsRightBtn').on('click', function () {
  36.                 add_fav($(this), {{ org.id }}, 2);
  37.             });
  38.         });
  39.  
  40.     </script>

六.  第四种发送ajax发送Post请求的方法

  1. <script type="text/javascript">
  2.         //添加评论
  3.         $(document).ready(function () {
  4.             $('#js-pl-submit').on('click', function () {
  5.                 var comments = $("#js-pl-textarea").val()
  6.                 if (comments == "") {
  7.                     alert("评论不能为空")
  8.                     return
  9.                 }
  10.                 $.ajax({
  11.                     cache: false,
  12.                     type: "POST",
  13.                     url: "/course/add_comment/",
  14.                     data: {'course_id': {{ course.id }}, 'comments': comments},
  15.                     async: true,
  16.                     beforeSend: function (xhr, settings) {
  17.                         xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
  18.                     },
  19.                     success: function (data) {
  20.                         if (data.status == 'fail') {
  21.                             if (data.msg == '用户未登录') {
  22.                                 window.location.href = "login.html";
  23.                             } else {
  24.                                 alert(data.msg)
  25.                             }
  26.  
  27.                         } else if (data.status == 'success') {
  28.                             window.location.reload();//刷新当前页面.
  29.                         }
  30.                     },
  31.                 });
  32.             });
  33.         });
  34.  
  35.     </script>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/224332
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号