Javascript Ajax+；Django:无法识别Ajax

我不明白为什么我的AJAX请求在方法执行良好时没有被JQUERY执行

我有一个表单，通过AJAX方法链接到JQuery函数事件，该事件将数据发送到Django函数。

当我单击save按钮时，我的页面会在浏览函数以捕获事件时重新加载。它可以很好地显示警报，但不使用AJAX发送任何信息。 我的功能正确吗？这是Django的问题吗

这是我的html表单：

<form method="post" id="insert_idea__form">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="insert_idea__titre">Titre de votre idée</label>
                                    <input type="text" class="form-control" id="insert_idea__title" required="">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="insert_idea__content">Contenu de l'idée</label>
                                    <textarea class="form-control" rows="5" id="insert_idea__content" name="centent"></textarea>
                                </div>
                            </div>                                                                        
                        </div> 
                        <button type="submit" class="btn btn-sm btn-primary">Sauvegarder</button>  
                    </form>

<script type="text/javascript">         
$("#insert_idea__form").on('submit',(function(e)

    alert("Stop");

    $.ajax({
        url: '{% url "insert_idea" %}',
        type : 'POST',
        data: {
            'title': $("#insert_idea__title").val(), 
            'content': $("#insert_idea__content").val()
        },
        dataType: 'json',
        success: function (data) {
            alert('success');
        }
    });

}));
</script> 

urlpatterns = [
    url(r'^ajax/insert_idea/$', ideas.insert_idea, name="insert_idea"),
]

def insert_idea(request):
    title = request.GET.get('title')
    centent = request.GET.get('centent')

    return JsonResponse()

这是我的观点：

<form method="post" id="insert_idea__form">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="insert_idea__titre">Titre de votre idée</label>
                                    <input type="text" class="form-control" id="insert_idea__title" required="">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="insert_idea__content">Contenu de l'idée</label>
                                    <textarea class="form-control" rows="5" id="insert_idea__content" name="centent"></textarea>
                                </div>
                            </div>                                                                        
                        </div> 
                        <button type="submit" class="btn btn-sm btn-primary">Sauvegarder</button>  
                    </form>

<script type="text/javascript">         
$("#insert_idea__form").on('submit',(function(e)

    alert("Stop");

    $.ajax({
        url: '{% url "insert_idea" %}',
        type : 'POST',
        data: {
            'title': $("#insert_idea__title").val(), 
            'content': $("#insert_idea__content").val()
        },
        dataType: 'json',
        success: function (data) {
            alert('success');
        }
    });

}));
</script> 

urlpatterns = [
    url(r'^ajax/insert_idea/$', ideas.insert_idea, name="insert_idea"),
]

def insert_idea(request):
    title = request.GET.get('title')
    centent = request.GET.get('centent')

    return JsonResponse()

如果您能帮助我理解为什么不向视图发送数据？为什么重新加载页面？

谢谢，

---

Eliott问题在于发送的数据中缺少令牌csfr

<script type="text/javascript">         
        $("#insert_idea__form").on('submit',(function(e)
           e.preventDefault();    
            alert("Stop");

            $.ajax({
                url: '/insert_idea/',
                type : 'POST',
                data: {
                    'title': $("#insert_idea__title").val(), 
                    'content': $("#insert_idea__content").val()
                },
                dataType: 'json',
                success: function (data) {
                    alert('success');
                }
            });

        }));
</script> 

$（“#插入#想法#表格”）。关于（‘提交’，（功能（e） e、 预防默认值（）； 警报（“停止”）； $.ajax({ url:“/insert_idea/”， 键入：“POST”， 数据：{ ‘title’：$（“#插入_idea__title”）.val（）， '内容'：$（“#插入(创意)内容”）.val（） }, 数据类型：“json”， 成功：功能（数据）{ 警惕（“成功”）； } }); }));

---

onSubmit处理程序中的第一行必须是

e.preventDefault（）

，以避免重新加载页面。否则，在进行ajax调用之前会重新加载页面。此外，您可能希望在视图的JsonResponse中返回一些内容，但这并不会导致问题。让我知道它是否有效，我会将其添加为Vaibhav提到的答案，在jquery函数中使用

e.preventDefault（）

。此外，在您的视图中，使用

request.POST.get（'title'，''）和
request.POST.get（'centent'，''）
而不是
request.get（'title'，''）
发送POST请求时，请在将表单单击到页面时，在提交表单的按钮中添加
type=“submit”
。