Django 表单提交使用 Form.js 示例

现在,让我们看一下 django form submit using form.js 示例的文章。我一步一步简单地解释了 django jquery form-js 示例。我想与您分享如何使用表单 js 插件在不刷新页面的情况下提交表单。我想向您展示如何在 django 中使用 jquery 提交表单。

立即通过 AJAX 提交表单。在最常见的用例中,这是响应用户单击表单上的提交按钮而调用的。如果要将自己的提交处理程序绑定到表单,请使用ajaxSubmit 。

您可以将这些示例与 django3 (django 3) 版本一起使用。

让我们看看下面带有输出的简单示例:

第 1 步:创建项目

在这一步中,我们将使用 django-admin 创建一个新的 django 项目。返回命令行界面并运行以下命令:

django-admin startproject example

第 2 步:创建应用程序

python3 manage.py startapp core

第 3 步:更新 setting.py

在这里,不要忘记在 settings.py 文件中注册新应用程序。在已安装的应用程序下,只需将“core”添加到列表中:

....
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'core',
]

第 4 步:数据库设置

下一步,我们将修改 settings.py 文件并更新数据库设置以配置 mydb 数据库:
settings.py

DATABASES = {  
    'default': {  
        'ENGINE': 'django.db.backends.mysql',  
        'NAME': 'example',  
        'USER':'root',  
        'PASSWORD':'root',  
        'HOST':'localhost',  
        'PORT':'3306'  
    }  
}  

第 5 步:创建模型

在这一步中,我们将需要用于存储联系人的数据库模型。打开 core/models.py 文件并添加以下代码:

from django.db import models
from django.contrib.auth.models import User

# Create your models here.
class Student(models.Model):
    name = models.CharField(max_length=255)
    email = models.EmailField(max_length=100)

    def __str__(self):
        return self.name

第 6 步:创建表格

在这一步中,我们需要创建一个将在我们的图像上传表单中使用的表单。比如添加一个引导类和验证等。此外,我们还需要添加自定义样式。

from django import forms
from .models import Student

class StudentForm(forms.ModelForm):
    name = forms.CharField(
        widget=forms.TextInput(
            attrs={
                "placeholder": "Name",
                "class": "form-control",
                "id": "name"
            }
        ))
    email = forms.EmailField(
        widget=forms.EmailInput(
            attrs={
                "placeholder": "Email",
                "class": "form-control",
                "id": "email"
            }
        ))

    class Meta:
        model = Student
        fields = ("__all__")

第 7 步:创建视图

在这一步中,我们需要创建用于执行 ajax 图片上传到数据库的视图。打开 core/views.py 文件并添加。
core/views.py

from django.shortcuts import render
from django.http import JsonResponse
from .forms import StudentForm

# Create your views here.
def contact_form(request):
    if request.is_ajax() and request.method == 'POST':
       form = StudentForm(request.POST)
       if form.is_valid():
           form.save()
           return JsonResponse({'success': True, 'message': 'Form Saved Successfully!'})
       else:
           return JsonResponse({'error': True, 'error': form.errors})
    else:
        form = StudentForm()
        return render(request, 'form-js.html', {'form': form})

第 8 步:创建模板

所以,最后我们到了这一步,我们需要按照以下文件创建 django 模板:

接下来,打开 core/templates/index.html 文件并添加:
core/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django Form Submit using Form.js Example - Tuts-Station.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
</head>
<body>
    <div class="container mt-5 pt-5">
        <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="card">
                    <div class="card-header">
                        <h5>Django Form Submit using Form.js Example - <span class="text-primary">Tuts-Station.com</span></h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-success success-msg" style="display:none"></div>
                        <div class="alert alert-danger error-msg" style="display:none">
                            <ul></ul>
                        </div>
                        <form action="{% url 'contactForm' %}" method="POST">
                            {% csrf_token %}
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="name">Name:</label>
                                        {{ form.name }}
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="email">Email:</label>
                                        {{ form.email }}
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-success savebtn" type="submit">Submit</button>
                            <button class="btn btn-secondary resetbtn" type="reset">Reset</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    $(document).ready(function(){

        /*------------------------------------------
        --------------------------------------------
        About 
        --------------------------------------------
        --------------------------------------------*/
        var options = { 
                complete: function(response) 
                {    
                    if($.isEmptyObject(response.responseJSON.error)){
                        $('.success-msg').css('display','block');
                        $('.success-msg').text(response.responseJSON.message);
                        $('#name').val('');
                        $('#email').val('');
                    }else{
                        printErrorMsg(response.responseJSON.error);
                    }
                },
                error:function(response){
                    console.log(response);
                }
            };

        $('.savebtn').click(function(e) {
            e.preventDefault(); 
            $(this).parents("form").ajaxSubmit(options);
        });

        function printErrorMsg(msg) {
            $('.error-msg').find('ul').html('');
            $('.error-msg').css('display','block');
            $.each( msg, function( key, value ) {
                $(".error-msg").find("ul").append('<li>'+value+'</li>');
            });

        }
    });
</script>
</html>

第 9 步:创建 URL

在本节中,我们将创建 url 来访问我们的视图。转到 urls.py core/urls.py 文件并按如下方式更新它:
core/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('form/', views.contact_form,name='contactForm'),
]

接下来,我们将要求修改您的根 preoject 文件夹的 urls.py 以更新文件。
example /urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('core.urls')),
]

运行服务器

在这一步中,我们将运行本地开发服务器来玩我们的应用程序,而无需将其部署到网络上。

python manage.py runserver

接下来,使用网络浏览器访问该地址。

http://localhost:8000/form/

我希望它会帮助你……

发表评论

邮箱地址不会被公开。 必填项已用*标注