blocks|key|3154330|text|既然您使用的是jQuery，为什么不使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3154331|<script+language="JavaScript">
++++$(document).ready(function()+{
++++++++$('#YOUR_FORM').submit(function()+{+//+catch+the+form's+submit+event
++++++++++++$.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..
++++++++++++++++++++$('#DIV_CONTAINING_FORM').html(response);+//+update+the+DIV+
++++++++++++++++}
++++++++++++});
++++++++++++return+false;
++++++++});
++++});
</script>|code-block|syntax|javascript|3154332|编辑|offset|length|style|BOLD|3154333|正如评论中指出的，有时上面的方法不起作用。因此，请尝试以下操作：|3154334|<script+type="text/javascript">
++++var+frm+=+$('#FORM-ID');
++++frm.submit(function+()+{
++++++++$.ajax({
++++++++++++type:+frm.attr('method'),
++++++++++++url:+frm.attr('action'),
++++++++++++data:+frm.serialize(),
++++++++++++success:+function+(data)+{
++++++++++++++++$("#SOME-DIV").html(data);
++++++++++++},
++++++++++++error:+function(data)+{
++++++++++++++++$("#MESSAGE-DIV").html("Something+went+wrong!");
++++++++++++}
++++++++});
++++++++return+false;
++++});
</script>|3154335|entityMap^0|0|0|0|2|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Since you are using jQuery why not use the following:</p>

<pre><code>&lt;script language="JavaScript"&gt;
    $(document).ready(function() {
        $('#YOUR_FORM').submit(function() { // catch the form's submit event
            $.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..
                    $('#DIV_CONTAINING_FORM').html(response); // update the DIV 
                }
            });
            return false;
        });
    });
&lt;/script&gt;
</code></pre>

<p><strong>EDIT</strong></p>

<p>As pointed out in the comments sometimes the above won't work. So try the following:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    var frm = $('#FORM-ID');
    frm.submit(function () {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                $("#SOME-DIV").html(data);
            },
            error: function(data) {
                $("#MESSAGE-DIV").html("Something went wrong!");
            }
        });
        return false;
    });
&lt;/script&gt;
</code></pre>


blocks|key|3154337|text|您可以使用变量的名称访问POST请求上的数据，在本例中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3154338|request.POST["noteid"]
request.POST["phase"]
request.POST["parent"]
...+etc|code-block|syntax|javascript|3154339|request.POST对象是不可变的。您应该将该值赋给一个变量，然后对其进行操作。|3154340|我建议您使用this+JQuery+plugin，这样您就可以编写普通的HTML表单，然后将它们“升级”到AJAX。在你的代码中到处使用$.post是一件很乏味的事情。|offset|length|3154341|此外，还可以使用Firebug上的Network视图(针对Firefox)或Google+Chrome的开发人员工具，这样您就可以查看AJAX调用发送的内容。|3154342|entityMap|0|LINK|mutability|MUTABLE|url|http://jquery.malsup.com/form/^0|0|0|0|6|I|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>You can access the data on the POST request using the name of the variable, in your case:</p>

<pre><code>request.POST["noteid"]
request.POST["phase"]
request.POST["parent"]
... etc
</code></pre>

<p>The request.POST object is inmutable. You should assign the value to a variable, and then manipulate it.</p>

<p>I would advise you to use <a href="http://jquery.malsup.com/form/" rel="noreferrer">this JQuery plugin</a>, so you can write normal HTML forms and then get them "upgraded" to AJAX. Having $.post everywhere in you code is kind of tedious.   </p>

<p>Also, use the Network view on Firebug(for Firefox) or the Developer Tools for Google Chrome so you can view what's being sent by you AJAX calls.</p>


blocks|key|253415|text|由于其他答案确实有效，因此我更喜欢使用jQuery+Form+Plugin。它完全支持你想要的，甚至更多。在Django部分中像往常一样处理post视图，只是返回被替换的HTML。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|253416|entityMap|0|LINK|mutability|MUTABLE|url|http://jquery.malsup.com/form/^0|J|I|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>As the other answers do work, I prefer to use the <a href="http://jquery.malsup.com/form/" rel="nofollow">jQuery Form Plugin</a>. It fully supports what you want and more. The post view is handled as usual in the Django part, just returning the HTML that is being replaced.</p>


blocks|key|3154390|text|需要注意的是，当将表单作为剪切为模式的html返回时。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3154391|Views.py|offset|length|style|BOLD|3154392|@require_http_methods(["POST"])
def+login(request):
form+=+BasicLogInForm(request.POST)
++++if+form.is_valid():
++++++++print+"ITS+VALID+GO+SOMEWHERE"
++++++++pass

++++return+render(request,+'assess-beta/login-beta.html',+{'loginform':form})|code-block|syntax|javascript|3154393|返回截取的html的简单视图|3154394|表单html截取的|3154395|<form+class="login-form"+action="/login_ajx"+method="Post">+
++<div+class="modal-header">
++++<button+type="button"+class="close"+data-dismiss="modal"+aria-hidden="true">&times;</button>
++++<h4+class="modal-title"+id="header">Authenticate</h4>
++</div>
++<div+class="modal-body">
++++++++{%25if+form.non_field_errors+%25}<div+class="alert+alert-danger">{{+form.non_field_errors+}}</div>{%25endif%25}
++++++++<div+class="fieldWrapper+form-group++has-feedback">
++++++++++++<label+class="control-label"+for="id_email">Email</label>
++++++++++++<input+class="form-control"+id="{{+form.email.id_for_label+}}"+type="text"+name="{{+form.email.html_name+}}"+value="{%25if+form.email.value+%25}{{+form.email.value+}}{%25endif%25}">
++++++++++++{%25if+form.email.errors+%25}<div+class="alert+alert-danger">{{+form.email.errors+}}</div>{%25endif%25}
++++++++</div>
++++++++<div+class="fieldWrapper+form-group++has-feedback">
++++++++++++<label+class="control-label"+for="id_password">Password</label>
++++++++++++<input+class="form-control"+id="{{+form.password.id_for_label+}}"+type="password"+name="{{+form.password.html_name}}"+value="{%25if+form.password.value+%25}{{+form.password.value+}}{%25endif%25}">
++++++++++++{%25if+form.password.errors+%25}<div+class="alert+alert-danger">{{+form.password.errors+}}</div>{%25endif%25}
++++++++</div>
++</div>
++<div+class="modal-footer">
<button+type="button"+class="btn+btn-default"+data-dismiss="modal">Cancel</button>
<input+type="submit"+value="Sign+in"+class="btn+btn-primary+pull-right"/>
</div>
</form>|3154396|包含模式的页面|3154397|<div+class="modal+fade"+id="LoginModal"+tabindex="-1"+role="dialog">{%25+include+"assess-beta/login-beta.html"+%25}</div>|3154398|使用include标签加载页面加载时截取的内容，以便在打开模式时可用。|3154399|Modal.js|3154400|$(document).on('submit',+'.login-form',+function(){
$.ajax({+
++++type:+$(this).attr('method'),+
++++url:+this.action,+
++++data:+$(this).serialize(),
++++context:+this,
++++success:+function(data,+status)+{
++++++++$('#LoginModal').html(data);
++++}
++++});
++++return+false;
});|3154401|在本例中，使用.on()类似于.live()，关键是将提交事件绑定到文档而不是按钮。|3154402|entityMap^0|0|0|8|0|0|0|0|9|0|0|5|2|0|0|0|Z|0|0|8|0|0|0|16|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1C|8|@$D|1D|E|1E|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|J|7|1F|8|@]|9|@]|A|$K|L]]|$1|S|3|T|5|6|7|1G|8|@$D|1H|E|1I|F|G]]|9|@]|A|$]]|$1|U|3|V|5|J|7|1J|8|@]|9|@]|A|$K|L]]|$1|W|3|X|5|6|7|1K|8|@$D|1L|E|1M|F|G]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1N|8|@$D|1O|E|1P|F|G]]|9|@]|A|$]]|$1|10|3|11|5|J|7|1Q|8|@]|9|@]|A|$K|L]]|$1|12|3|13|5|6|7|1R|8|@$D|1S|E|1T|F|G]]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|15|$]]

<p>Something to look out for is when returning the form as an html snipped to a modal.</p>

<p><strong>Views.py</strong></p>

<pre><code>@require_http_methods(["POST"])
def login(request):
form = BasicLogInForm(request.POST)
    if form.is_valid():
        print "ITS VALID GO SOMEWHERE"
        pass

    return render(request, 'assess-beta/login-beta.html', {'loginform':form})
</code></pre>

<p>Simple view to return the html snipped</p>

<p><strong>Form html Snipped</strong></p>

<pre><code>&lt;form class="login-form" action="/login_ajx" method="Post"&gt; 
  &lt;div class="modal-header"&gt;
    &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
    &lt;h4 class="modal-title" id="header"&gt;Authenticate&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
        {%if form.non_field_errors %}&lt;div class="alert alert-danger"&gt;{{ form.non_field_errors }}&lt;/div&gt;{%endif%}
        &lt;div class="fieldWrapper form-group  has-feedback"&gt;
            &lt;label class="control-label" for="id_email"&gt;Email&lt;/label&gt;
            &lt;input class="form-control" id="{{ form.email.id_for_label }}" type="text" name="{{ form.email.html_name }}" value="{%if form.email.value %}{{ form.email.value }}{%endif%}"&gt;
            {%if form.email.errors %}&lt;div class="alert alert-danger"&gt;{{ form.email.errors }}&lt;/div&gt;{%endif%}
        &lt;/div&gt;
        &lt;div class="fieldWrapper form-group  has-feedback"&gt;
            &lt;label class="control-label" for="id_password"&gt;Password&lt;/label&gt;
            &lt;input class="form-control" id="{{ form.password.id_for_label }}" type="password" name="{{ form.password.html_name}}" value="{%if form.password.value %}{{ form.password.value }}{%endif%}"&gt;
            {%if form.password.errors %}&lt;div class="alert alert-danger"&gt;{{ form.password.errors }}&lt;/div&gt;{%endif%}
        &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
&lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
&lt;input type="submit" value="Sign in" class="btn btn-primary pull-right"/&gt;
&lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p><strong>Page containing the modal</strong></p>

<pre><code>&lt;div class="modal fade" id="LoginModal" tabindex="-1" role="dialog"&gt;{% include "assess-beta/login-beta.html" %}&lt;/div&gt;
</code></pre>

<p>Use the include tag to load the snipped on page load so it is available when you open the modal.</p>

<p><strong>Modal.js</strong></p>

<pre><code>$(document).on('submit', '.login-form', function(){
$.ajax({ 
    type: $(this).attr('method'), 
    url: this.action, 
    data: $(this).serialize(),
    context: this,
    success: function(data, status) {
        $('#LoginModal').html(data);
    }
    });
    return false;
});
</code></pre>

<p>Using the .on() in this case work like .live() the key being binding the submit event not to the button but to the document.</p>


blocks|key|3154442|text|在Django表单中使用AJAX+POST的大多数示例，包括官方示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3154443|https://docs.djangoproject.com/en/1.9/topics/class-based-views/generic-editing/#ajax-example|offset|length|3154444|当ModelForm.clean()没有产生任何错误(form_valid)时，都是正常的。但是，它们并没有执行困难部分:通过AJAX响应将ModelForm错误转换为Javascript+/+DOM客户端。|style|CODE|3154445|我的可插拔应用程序使用带有客户端视图模型的AJAX响应路由自动显示基于类的视图AJAX+post+ModelForm验证错误，类似于它们在传统HTTP+POST中的显示方式：|3154446|https://django-jinja-knockout.readthedocs.org/en/latest/forms.html#ajax-forms-processing+https://django-jinja-knockout.readthedocs.org/en/latest/viewmodels.html|3154447|同时支持Jinja2和Django模板引擎。|3154448|entityMap|0|LINK|mutability|MUTABLE|url|1|https://django-jinja-knockout.readthedocs.org/en/latest/forms.html#ajax-forms-processing|2|https://django-jinja-knockout.readthedocs.org/en/latest/viewmodels.html^0|0|0|2K|0|0|1|H|R|A|1Y|9|0|1D|9|0|0|2G|1|2H|1Z|2|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@$D|16|E|17|H|I]|$D|18|E|19|H|I]|$D|1A|E|1B|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1C|8|@$D|1D|E|1E|H|I]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1F|8|@]|9|@$D|1G|E|1H|1|1I]|$D|1J|E|1K|1|1L]]|A|$]]|$1|N|3|O|5|6|7|1M|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|C]]|W|$5|S|T|U|A|$V|X]]|Y|$5|S|T|U|A|$V|Z]]]]

<p>Most of examples of using AJAX POST with Django forms, including the official example:</p>

<p><a href="https://docs.djangoproject.com/en/1.9/topics/class-based-views/generic-editing/#ajax-example" rel="nofollow">https://docs.djangoproject.com/en/1.9/topics/class-based-views/generic-editing/#ajax-example</a></p>

<p>are fine when <code>ModelForm.clean()</code> did not produce any errors (<code>form_valid</code>). 
However, they do not perform hard part: translating <code>ModelForm</code> errors via AJAX response to Javascript / DOM client-side.</p>

<p>My pluggable application uses AJAX response routing with client-side viewmodels to automatically display class-based view AJAX post <code>ModelForm</code> validation errors similar to how they would be displayed in traditional HTTP POST:</p>

<p><a href="https://django-jinja-knockout.readthedocs.org/en/latest/forms.html#ajax-forms-processing" rel="nofollow">https://django-jinja-knockout.readthedocs.org/en/latest/forms.html#ajax-forms-processing</a>
<a href="https://django-jinja-knockout.readthedocs.org/en/latest/viewmodels.html" rel="nofollow">https://django-jinja-knockout.readthedocs.org/en/latest/viewmodels.html</a></p>

<p>Both Jinja2 and Django Template Engine are supported.</p>


<p>I've checked out tons of tutorials for django AJAX forms, but each one of them tells you one way of doing it, none of them is simple and I'm a bit confused since I've never worked with AJAX.</p>

<p>I have a model called "note", a modelform for it, and inside the template I need that everytime a note element sends the stop() signal (from jQuery Sortables) django updates the object.</p>

<p>My current code:</p>

<p><strong>views.py</strong></p>

<pre><code>def save_note(request, space_name):

    """
    Saves the note content and position within the table.
    """
    place = get_object_or_404(Space, url=space_name)
    note_form = NoteForm(request.POST or None)

    if request.method == "POST" and request.is_ajax:
        msg = "The operation has been received correctly."          
        print request.POST

    else:
        msg = "GET petitions are not allowed for this view."

    return HttpResponse(msg)
</code></pre>

<p><strong>JavaScript:</strong></p>

<pre><code>function saveNote(noteObj) {
    /*
        saveNote(noteObj) - Saves the notes making an AJAX call to django. This
        function is meant to be used with a Sortable 'stop' event.
        Arguments: noteObj, note object.
    */
    var noteID = noteObj.attr('id');

    $.post("../save_note/", {
        noteid: noteID,
        phase: "Example phase",
        parent: $('#' + noteID).parent('td').attr('id'),
        title: $('#' + noteID + ' textarea').val(),
        message: "Blablbla",
    });
}
</code></pre>

<p>The current code gets the data from the template and prints it in the terminal. I don't know how I can manipulate this data. I've seen some people manages the data through jqueryforms to send the data to django.</p>

<p>How can I access the data sent by AJAX and update the note object?</p>


How to POST a django form with AJAX & jQuery

路由

Django

jQuery

我查阅了大量的django AJAX表单教程，但每个教程都告诉您一种方法，没有一个是简单的，我有点困惑，因为我从来没有使用过AJAX。我有一个名为" note“的模型，一个用于它的模型形式，在这个模板中，我需要每当note元素发送stop()信号(来自jQuery可排序) django都会更新该对象。我当前的代码：vi...

问如何使用AJAX和jQuery发布django表单
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用AJAX和jQuery发布django表单EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用AJAX和jQuery发布django表单
EN