简体   繁体   English

使用AJAX在Django中提交表单而不提交页面刷新

[英]Form Submission in Django without Page Refresh using AJAX

I'm a newbie in python so this might be fixed easily. 我是python的新手,因此可能很容易解决。

I'm trying to do a register form using Jquery with Django. 我正在尝试使用jQuery与jQuery进行注册。 I've been following this tutorial 我一直在关注本教程

when I click on the button it shows me the success message in the alert but nothing is inserted in the database. 当我单击按钮时,它向我显示警报中的成功消息,但数据库中未插入任何内容。

Here is my code : 这是我的代码:

register.html register.html

<body>
<form id="add_user_form">

    {% csrf_token %}

    {# label et input du uti_login de la class Form#}
    <label for="UTI_LOGIN">Insérer un surnom d'utilisateur</label>
    <input id="UTI_LOGIN" type="text" name="UTI_LOGIN">
    <br>
        {# label et input du UTI_NOM de la class LoginForm#}
    <label for="UTI_NOM">Insérer un nom d'utilisateur</label>
    <input id="UTI_NOM" type="text" name="UTI_NOM">
    <br>
        {# label et input du UTI_PRENOM de la class LoginForm#}
    <label for="UTI_PRENOM">Insérer un prenom d'utilisateur</label>
    <input id="UTI_PRENOM" type="text" name="UTI_PRENOM">
    <br>
        {# label et input du UTI_CIVILITE de la class LoginForm#}
    <label for="UTI_CIVILITE">Insérer un civilite d'utilisateur</label>
    <input id="UTI_CIVILITE" type="text" name="UTI_CIVILITE">
    <br>
        {# label et input du UTI_EMAIL de la class LoginForm#}
    <label for="UTI_EMAIL">Insérer un email d'utilisateur</label>
    <input id="UTI_EMAIL" type="text" name="UTI_EMAIL">
    <br>
    {# label et input du uti_mdp de la class LoginForm#}
    <label for="UTI_MDP">Insérer mot de passe</label>
    <input id="UTI_MDP" type="password" name="UTI_MDP">
    <br>

    <label for="UTI_SUPPRIME">Hidden label checked</label>
    <input id="UTI_SUPPRIME" type="checkbox" hidden checked>
    <br>
    <br>
    <input value="S'inscrire ! ☺" type="submit">
</form>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).on('submit','#add_user_form',function (e) {
{#                    prevent the page getting refreshed#}
            e.preventDefault();

            $.ajax({
                type:'POST',
                url: 'registerSearch',
                data:{
                    username:$('#UTI_LOGIN').val(),
                    mdp:$('#UTI_MDP').val(),
                    nom:$('#UTI_NOM').val(),
                    prenom:$('#UTI_PRENOM').val(),
                    civilite:$('#UTI_CIVILITE').val(),
                    email:$('#UTI_EMAIL').val(),
                    supp:$('#UTI_SUPPRIME').val(),
                    csrfmiddlewaretoken: $('input[name = csrfmiddlewaretoken]').val()
                },
                success:function () {
                    alert("Utilisateur crée !");
                }

            })
        });
    </script>
</html>

urls.py urls.py

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'register', views.register_list, name='register'),
    url(r'registerSearch', views.registersearch_list),
]

views.py views.py

def register_list(request):
    return render(request, 'esigapp/register.html', {})


def registersearch_list(request):
    if request.method == 'POST':
        username = request.POST['username']
        mdp = request.POST['mdp']
        nom = request.POST['nom']
        prenom = request.POST['prenom']
        civil = request.POST['civilite']
        email = request.POST['email']
        supp = request.POST['supp']

        Sie_utilisateur.objects.create(
            UTI_LOGIN=username,
            UTI_MDP=mdp,
            UTI_NOM=nom,
            UTI_PRENOM=prenom,
            UTI_CIVILITE=civil,
            UTI_EMAIL=email,
            UTI_SUPPRIME=supp
        )
    return HttpResponse('')

and finally 最后

models.py models.py

class Sie_utilisateur(models.Model):
    UTI_LOGIN = models.CharField(max_length=50)

    UTI_MDP = models.CharField(max_length=50)

    UTI_NOM = models.CharField(max_length=50)

    UTI_PRENOM = models.CharField(max_length=50)

    UTI_CIVILITE = models.CharField(max_length=1)

    UTI_EMAIL = models.CharField(max_length=50)

    UTI_SUPPRIME = models.BooleanField()

    def __str__(self):
        return self.UTI_NOM

Some tips are also useful :) Thanks 一些技巧也很有用:)谢谢

The problem is not Ajax. 问题不在于Ajax。 It's simply that you didn't anchor or terminate your URL patterns; 原因很简单,您没有锚定或终止URL模式。 so the URL "/registerSearch" matches the first one, "register". 因此网址“ / registerSearch”与第一个“ register”匹配。

Make sure you use beginning and end anchors: 确保使用开始和结束锚点:

url(r'^register$', views.register_list, name='register'),
url(r'^registerSearch$', views.registersearch_list),

You should probably also return something explicit in your registerSearch view so that your Ajax knows that the item has actually been created. 您可能还应该在registerSearch视图中返回明确的内容,以便您的Ajax知道该项目实际上已经创建。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM