使用Ajax jQuery提交Django Forms的简便方法

Question

我对Ajax相对较新,我仍在努力掌握所有概念.我试图查看一堆Ajax-Django表单提交的教程,其中大部分需要jQuery表单,这似乎不是一种简单的方法来处理表单提交给我.我很难掌握这个概念.

我正在尝试为用户注册,登录,发布创建和评论编写一些基于ajax的表单提交.到目前为止,我还没有找到一种让我更容易理解Ajax方法如何工作的方法.

我真的很感激我在这方面可以得到任何帮助.

这是我到目前为止所尝试的.

change_pw.html

{% extends "base.html" %}
    {% block title %}Change Password{% endblock %}
    {% block head %}Change Password{% endblock %}
    {% block content %}
    {% include "modal_change_pw.html" %}
    {% endblock %}

modal_change_pw.html

<div id="modalchangepw">
<ul style="margin:5px;">
    <ul class="thumbnails" style="margin: 0 auto;background: white;">
        <div class="thumbnail row-fluid" style="background: white; padding: 10px;width: 97%; -moz-border-radius: 5px;border-radius: 5px;-moz-box-shadow:3px 3px 5px 0px #ccc;-webkit-box-shadow:3px 3px 5px 0px #ccc;box-shadow:3px 3px 5px 0px #ccc;">
            <br>
            {% if not error == '' %}
                <div class="alert alert-error">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ error }}
                </div>
            {% endif %}
            {% if not success == '' %}
                <div class="alert alert-success">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ success }}
                </div>
            {% endif %}
            {% if messages %}
                {% for message in messages %}
                  <div{% if message.tags %} class="alert alert-{{ message.tags }}"{% endif %}>
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ message|safe }}
                  </div>
                {% endfor %}
            {% endif %}
            <form id = 'changepw' enctype="multipart/form-data" method="post" action=".">
                <p><label for="id_currentpw">Current Password:</label> <input type="password" name="currentpw" id="id_currentpw" /></p>
                <p><label for="id_newpw1">New Password:</label> <input type="password" name="newpw1" id="id_newpw1" /></p>
                <p><label for="id_newpw2">Re-enter New Password:</label> <input type="password" name="newpw2" id="id_newpw2" /></p>
                <input class="btn btn-primary" type="submit" value="submit"/>
                {% csrf_token %}
            </form>
        </div>
    </ul>
</ul>
</div>

views.py

def change_pw(request):
    user=request.user
    error=''
    success=''
    if request.method == 'POST':
        form = ChangePw(request.POST)
        if form.is_valid():
            currentpw=form.cleaned_data['currentpw']
            newpw1=form.cleaned_data['newpw1']
            newpw2=form.cleaned_data['newpw2']
            if currentpw and newpw1 and newpw2:
                if user.check_password(currentpw):
                    if newpw1==newpw2:
                        user.set_password(newpw1)
                        user.save()
                        success='Password updated!!'
                        if request.is_ajax() :
                            messages.success(request, 'Password updated.')
                            return HttpResponseRedirect ('/changepw/')
                        else:
                            return HttpResponseRedirect ('/user/%s/' % user.username)
                    else:
                        error='New passwords do not match'
                else:
                    error='Incorrect Current Password'
            else:
                error='Enter all Password fields to make any changes' 
    else:
        form = ChangePw()
    variables = RequestContext(request, {
           'form':form,
           'error':error,
           'success':success
    })
    if request.is_ajax() :
         return render_to_response('modal_change_pw.html', variables)
    else:    
        return render_to_response('change_pw.html', variables)

forms.py

class ChangePw(forms.Form):
     currentpw = forms.CharField(
        label=u'Current Password',
        required=False,
        widget=forms.PasswordInput()
     )
     newpw1 = forms.CharField(
        label=u'New Password',
        required=False,
        widget=forms.PasswordInput()
     )
     newpw2 = forms.CharField(
        label=u'Re-enter New Password',
        required=False,
        widget=forms.PasswordInput()
     )

jQuery的

//Change PW
        $('#changepw').live('submit', function(event) { // catch the form's submit event
          event.preventDefault();
          $.ajax({ // create an AJAX call...
              data: $(this).serialize(), // get the form data
              type: $(this).attr('method'), // GET or POST
              url: $(this).attr('action'), // the file to call
              success: function(response) { // on success..
                  $('#modalchangepw').html(response); // update the DIV
              }
          });
          return false;
        });

代码似乎现在工作正常.但我的目标是以模式弹出方式处理这些表单,以便用户不必离开他/她当前所在的页面.在模式弹出的情况下,我的表单似乎没有提交值.

Answer 1

这个AJAX概念与一般表单提交的工作方式没有太大区别.AJAX背后的想法是异步地将数据提交(传递)到服务器.

这个怎么运作？

通过一般表单提交流程就像这样.

User submits a POST request
               ?
Server Does the Data Processing
               ?
Redirects to a Success or Failure Page

使用ajax它的工作方式非常相似.

User Submits a form through AJAX
               ?
AJAX sends the POST data to the server in the background and waits for a response
               ?
Server does the Data Processing
               ?
and sends a Response back to AJAX
               ?
AJAX sends the response back to the same template where the request was initiated.

现在让我们看一下带有django视图的简单Ajax登录.

views.py

def ajax_login(request):
    """  
    This view logs a user in using the POST data.
    """

    if request.method == 'POST':
        data = {}
        username = request.POST['username']
        password = request.POST['password']
        user = authenticate(username=username, password=password)
        if (not user is None) and (user.is_active):
            login(request, user)
            # Set Session Expiry to 0 if user clicks "Remember Me"
            if not request.POST.get('rem', None):
                request.session.set_expiry(0)
            data['success'] = "You have been successfully Logged In"
        else:
            data['error'] = "There was an error logging you in. Please Try again"
        return HttpResponse(simplejson.dumps(data), mimetype="application/json")

在上面的视图中,我们进行了数据处理并发回了JSON响应.ajax方法看起来像这样.

function ajaxLogin(){
    var dataString = '&username=' + $('input[name=username]').val() +
                     '&password=' + $('input[name=password]').val() +
    $.ajax({
        type: "POST",
        url: "/ajax_login/",
        data: dataString,
        success: function(data) {
            alert(data);
        }   
     }); 
     return false;   
}

这里,成功方法将数据返回alerts给用户.

UPDATE

我看到你已经定义了这个ajaxPwchange()方法,但我真的没有看到你在任何地方调用它,我认为这就是为什么页面仍然刷新的原因.您可以将ajaxPwchange()方法绑定到提交按钮的onclick事件,如下所示.

<input class="btn btn-primary" type="submit" value="submit" onclick="ajaxPwchange();" />

或者按照以下document.ready方法绑定它:

$(document).ready(function(){
    $('input.btn-primary').click(function(){
        ajaxPwchange();
    });
});

UPDATE2

div会消失,因为您正在将div更改为直接在以下代码中html的json对象.

success: function(response) { // on success..
             $('#modalchangepw').html(response); // update the DIV
         }

你应该尝试这样的事情:

success: function(response) { // on success..
             var jsonData = $.parseJSON(response);
             $.each(response, function(){
                 $('#modalchangepw').append('<div class="message">' + $(this) + '</div>');
             });
         }

Answer 2

我将为您提供一个非常简单的示例,以便您可以掌握概念,然后使用相同的概念来完成您正在尝试的操作.

我首先要创建一个普通的视图 views.py

def MyAjaxView(request):
    if request.is_ajax():
         if request.method == 'GET':
             # If it was a GET
             print request.GET
         elif request.method == 'POST':
             # Here we can access the POST data
             print request.POST
    else:
         doSomeOtherStuff()
    return render_to_response('mytemplate.html', some_context_maybe, context_instance=RequestContext(request))

根据您已经使用的内容或允许使用的内容,您可以使用javascript或库jQuery调用它.

假设您有一个看起来像这样的表单

<form id="myNameForm">
   {% csrf_token %}
   <input type="text" id="name" />
   <input type="submit" value="submit" id="submitButton" />
</form>

你现在可以使用JavaScript将它连接到一个ajax函数,我将使用jQuery作为演示,我将使用jQuery方法,ajax()因为它解释了概念并继续进行post()应该不会太困难.

<script>
    $('#submitButton').click(function(event){
         event.preventDefault(); //so that we stop normal form submit.
         $.ajax(
             url: 'myViewUrl',
             type: 'post',
             dataType: 'json',
             data: $('form#myNameForm').serialize(),
             success: function(data) {
               doStuffWithDataHere(data);
             }
         );
    });
</script>

您必须确保您urls.py的网址映射到新视图.使用CSRF保护还需要使用CSRF处理器,请参阅BurhanKhalids注释以获取文档.