jQuery Django 用load post整个表单

最新推荐文章于 2023-10-19 19:39:43 发布

原创最新推荐文章于 2023-10-19 19:39:43 发布 · 881 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用Django框架实现的表单处理示例，通过结合HTML、CSS及JavaScript技术来展示如何创建并提交表单，并利用AJAX进行异步提交操作，避免了页面刷新带来的用户体验下降。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<form action="" method="post" id="myform">
    {% csrf_token %}
    {% for field in form %}
        {% if field.errors %}
            <p>{{ field.errors }}</p>
        {% endif %}
        {{ field.label_tag }}<br />
        {{ field }}<p>
    {% endfor %}
    <p>
    <input type="submit" value="submit" id="submit_button" />
</form>
<script>
	$('#submit_button').click(function(event) {
		$(this.form).load(
			this.form.action,
			$(this.form).serializeArray());
		event.preventDefault();
	});
</script>

/*

	$('#submit_button').click(function() {
		event.preventDefault();    #firefox下必须先阻止默认提交，再post;
		this.disabled = 'disabled';
		jQuery.post(this.form.action, $(this.form).serializeArray(), function(data, status, xhr) {
			document.documentElement.outerHTML = data;     
		});