Django4电商项目Contact页面Ajax异常：Email丢失且is_ajax()返回False

问题1：Email字段后端获取值为None #

原因 #

ContactForm的clean_email方法未返回清洗后的邮箱值，导致Django自动将该字段的cleaned_data设为None。

修复步骤 #

修改mainapp_ecommerce/forms.py中的clean_email方法，添加返回语句：

def clean_email(self):
    email = self.cleaned_data.get("email")
    if not email:
        raise forms.ValidationError("Email is required")
    if not "gmail.com" in email:
        raise forms.ValidationError("Email has to be gmail.com")
    return email  # 必须返回清洗后的值，否则字段会被设为None

问题2：request.is_ajax()返回False，Ajax提交未触发 #

原因 #

1. jQuery选择器错误：base.html中获取表单的选择器缺少类选择器前缀，无法找到目标表单元素，导致submit事件未绑定。
2. 模板结构冗余：contact/view.html继承base.html后重复编写完整HTML结构，造成页面DOM嵌套混乱，元素无法被正确选中。
3. JS库重复加载：contact/view.html重复引入jQuery和Bootstrap JS，与base.html中的加载冲突，导致事件绑定失效。

修复步骤 #

1. 修正base.html中的jQuery选择器
   将表单选择器从$("contact-form")改为$(".contact-form")（class选择器需添加.前缀）：

   var contactForm = $(".contact-form")
   

2. 重构contact/view.html的模板结构
   删除重复的HTML、head、body标签，仅保留内容部分（继承base.html已有的页面结构）：

   {% extends "base.html" %}
   
   {% block content %}
   <div class='text-center'>
     <h1>{{title}}</h1>
     <h3>we are working</h3>
   </div>
   
   <div class='container'>
     <div class='row'>
       <div class='col'>      
         <div class='col-sm-6 col-12 mx-auto'>
           <p>{{ content }}</p>
           <form class='contact-form' method='POST' action='{% url "contact" %}'>  
             {% csrf_token %}
             {{ form.as_p }}
             <br>
             <button type='submit' class="btn btn-primary">Submit</button>
           </form>
         </div>
       </div>
     </div>
   </div>
   <br><br>
   {% endblock %}
   

验证修复效果 #

提交表单后，后端日志应显示：

contact_form.cleaned_data {'fullname': 'John Doe', 'email': 'xxx@gmail.com', 'content': 'uvyibuon'}
Ajax request
[20/Nov/2023 16:21:15] "POST /contact/ HTTP/1.1" 200 23

前端会弹出thank you a lot!的提示框，表单自动清空。

内容的提问来源于stack exchange，提问作者Tms91