[英]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.