Python：Django + Ajax发送POST表单，并将返回信息回显到页面中

最新推荐文章于 2021-08-06 13:51:09 发布

陪代码一起浪迹天涯

最新推荐文章于 2021-08-06 13:51:09 发布

阅读量1.4k

点赞数

分类专栏： Djiango 文章标签： Django Ajax提交表单 Django Ajax回显 Django Ajax表单回显 Django Ajax发送表单 Django Ajax

本文链接：https://blog.csdn.net/seoyundu/article/details/105195470

版权

本文介绍了如何使用Django和Ajax实现POST表单数据的提交及后端返回信息的前端回显。重点包括：设置contentType、正确构造data参数、处理后端的@csrf_exempt以及在Django中处理POST数据。通过示例代码，阐述了前端Ajax与后端Django交互的细节，帮助理解两者结合的工作流程。

摘要由CSDN通过智能技术生成

我们的目的：前端将表单数据通过Ajax发送回后端（Django），然后处理后端返回的信息并显示在当前页面中，这里使用Ajax进行回显处理；

那么先看js代码：

<!--以下为 Ajax脚本 -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
     $("#save").click(function(){
     $.ajax({
         url:"/api/add_event/",       #url
         type: "POST",                #提交表单的类型，相当于method="post"
         dataType: "json",            #dataType, 这个是请求后，返回的数据将以json格式显示
         data:{"name": $("#id_name").val(),      #在"#"号后面是控件id， 所以千万不要搞错了，要不然会出大事的
               "limit":$("#id_limit").val(),
               "address": $("#id_address").val(),
               "start_time": $("#id_start_time").val(),
               "status": $("#id_status").val(),
         },                                #Data这个地方，必须要获取数据，代表将获取到的数据发送到后端，后端再进行处理
         success:function(data){           
            console.log(data);            #调试使用
            console.log(data.status);      #调试使用
            console.log(data.message);     #调试使用
            $(".text").text(data.message);  #将后端返回到结果通过前端页面进行展示

        },        #注意标点
     });         #需要注意标点符号，如果标点符合错误了，那ajax基本上都不会执行(否则，后果很严重哦)