Django中的表单提交没有使用AJAX进行页面刷新

时间:2017-04-02 13:10:00

标签: javascript jquery python ajax django

我是python中的新手,所以这很容易修复。

我正在尝试使用Jquery和Django进行注册表单。 我一直关注这个tutorial

当我点击按钮时,它会在警报中显示成功消息,但数据库中没有插入任何内容。

这是我的代码:

  

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

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

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('')

最后

  

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

一些提示也很有用:) 感谢

1 个答案:

答案 0 :(得分:0)

问题不在于Ajax。只是您没有锚定或终止您的网址格式;所以URL&#34; / registerSearch&#34;匹配第一个,&#34;注册&#34;。

确保使用开始和结束锚点:

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

您可能还应该在registerSearch视图中返回一些显式内容,以便您的Ajax知道该项目实际上已创建。