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

心已赠人 2023-07-19 08:20 9阅读 0赞

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

**那么先看js代码**：

<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基本上都不会执行(否则，后果很严重哦)
         });         #注意标点
        });          #注意标点         
        </script>

**注意（踩过的坑）**：

1.**contentType: "application/json**" ——>加入该语句时，在后端print(request.POST)时无法获取内容，相当于后端根本拿不到数据。因此在网上搜索了解到，使用contentType: “application/json”则data只能是json字符串；不使用时contentType一般为默认的application/x-www-form-urlencoded格式， 因此如果不限制 POST格式，干脆就不写。  
2. 说说“**data**”这里面需要注意：**data:\{"name", $("\#id\_name").val(), \}** 这其中id\_name必须为控件的id 名称，使用其它的则不能获取的数据，这个还是得注意。  
3. 标注符号，标点符号，标点符号，重要的事情说三遍，当然可以借助专门的编辑器（我主要是懒哦，哈哈）  
4. **$(".text").text(data.message);** 回显在html中，是对后端返回的数据进行处理  
那行回显在网页面上面  
**<font color="red">  
<span class="text"></span>  
</font>**

--------------------

**以下为html代码：**

<div class="container">
        <div class="col-md-4 col-md-offset-4">
            <form id="form1" onsubmit="return false" action="##" method="POST" class="form-horizontal">
    
            
                <font color="red">
                    <span class="text"></span>
                </font>
    
                <div class="form-group">
                    <label for="id_name">发布会名称:</label>
                    <input type="text" name="name" class="form-control" placeholder="发布会名称" maxlength="128" required id="id_name" />
                </div>
                <div class="form-group">
                    <label for="id_limit">Limit:</label>
                    <input type="number" name="limit" class="form-control" required id="id_limit" />
                </div>
                <div class="form-group">
                    <label for="id_address">发布会地址:</label>
                    <input type="text" name="address" class="form-control" placeholder="地址" maxlength="128" required id="id_address" />
                </div>
                <div class="form-group">
                    <label for="id_start_time">开始日期:</label>
                    <input type="text" name="start_time" required id="id_start_time" />
                </div>
    
                <div class="form-group">
                    <label for="id_status">发布状态:</label>
                    <select name="status" id="id_status">
                      <option value="blank">-----</option>
                      <option value="1">True</option>
                      <option value="0">False</option>
                    </select>
                </div>
    
                <div align="center">
                 <input  class="btn btn-lg btn-primary" id="save"  type="submit" value="保存发布会" ></input >
                </div>
            </form>
        </div>
    </div>

**现在来看一下后端的代码**：

from django.views.decorators.csrf import csrf_exempt
    @csrf_exempt
    def add_event(request):
        if request.is_ajax():
            print(request.body)
            print(request.POST)
    
            name = request.POST.get('name', '')  # 发布会名称
            limit = request.POST.get('limit', '')  # 限制人员
            status = request.POST.get('status', '')  # 发布会状态
            address = request.POST.get('address', '')  # 发布会地址
            start_time = request.POST.get('start_time', '')  # 发布会时间
    
            if name == '' or limit == '' or status == '' or start_time == '':
                return JsonResponse({'status': 10021, 'message': 'parameter error'})
    
            # 判断发布会名称重复
            result = Event.objects.filter(name=name)
            if result:
                return JsonResponse({'status': 10023, 'message': 'event name already exists'})
    
            if status == '':
                status = 1
    
            try:
                # Event.objects.create(id = eid, name = name, limit = limit, address = address, status = int(status), start_time=start_time)
                Event.objects.create(name=name, limit=limit, address=address, status=int(status), start_time=start_time)
            except ValidationError as e:
                error = 'start_time format error. It must be in YYYY-MM-DD HH:MM:SS'
                return JsonResponse({'status': 10024, 'message': error})
            return JsonResponse({'status': 200, 'message': 'add event success'})

1、在后端处理时，我们需要加入：**@csrf\_exempt** 标记,所以导包***from django.views.decorators.csrf import csrf\_exempt***，否则会出现错误csrf\_token错误 （403）  
2、**request.is\_ajax()**判断当前是否是使用ajax 进行表单提交  
3、django request.POST / request.body  
当request.POST没有值 需要考虑：  
1.请求头中的: ***Content-Type: application/x-www-form-urlencoded*** request.POST中才会有值（才会去request.body中解析数据），关于Content-Type前面也提到[VR][]，不写的错误，它就是默认。

request.body的请求数据：  
b’name=%E5%A4%BA%E5%A4%BA&limit=123‘

request.POST的数据，django已进行自动处理：  
QueryDict: \{‘name’: \[‘夺夺’\], ‘limit’: \[‘123’\]

[VR]: http://www.vrgc.com.cn