Question

我是django和ajax的新手。我做过研究，但大多数结果我发现在我的项目中难以理解的地方。

Bellow是我表格的HTML代码

     <form action='' method="post" enctype='multipart/form-data'>
        {% csrf_token %} {{ form.as_p }}

        <button type="submit">Save changes</button>
    </form>

这是我的view.py，我将两个模型传递到同一模板

def DetailMfg(request,slug):
    instance=get_object_or_404(ManufacturerProfile,slug=slug)
    form =UpdateManufacturerLogo(request.POST or None ,request.FILES,instance=instance)
    form1 = UpdateManufacturerBackgroundprofileForm(request.POST ,request.FILES,instance=instance)
    if request.method == 'POST':
       if form1.is_valid() and form.is_valid():
          instances = form1.save(commit=False)
          instances1 = form.save(commit=False)
          instances1.save()
          instances.save()


       else:
          form=UpdateManufacturerBackgroundprofileForm(instance=instance)
          form =UpdateManufacturerBackgroundprofileForm(instance=instance)

    context={'instance':instance,
         'distributorprofile':distributorprofile,
         'form':form,
         'form1':form1}
    template_name="gbiz1990/User_function_pages/User_company_info_pages/user_mfgprofile_home.html"
    return render(request,template_name,context)

我的网址

 url(r'^manufacturer_view_profile/(?P<slug>[\w-]+)/$',views.DetailMfg,name="mfgdetail"),

我的问题是，当我在模板中提交其中一个表单时，这将是创建Ajax函数以防止页面重新加载的最佳方式。我的视图如何在防止ajax函数或数据时接受ajax函数或数据页面重新加载。注意我在同一个模板中有多个django模型。提前谢谢。

这是我的模特

class ManufacturerProfile(models.Model):
    title = models.CharField(choices=ManufacturerType,max_length=250,blank=False,null=True)
   TypeOfDistributorPrefered =MultiSelectField(choices=Distributortype,null=True,blank=False,max_choices=5)
    verified = models.BooleanField(default=False)
    logo =models.ImageField(upload_to="mfg_logo",null=True,blank=False)
    backgroundimage=models.ImageField(upload_to="mfg_logo",null=True,blank=False)
    slug = models.SlugField(default='page-slug',unique=True)
    promot=models.BooleanField(default=False)
    user =models.ForeignKey(User,unique=True,null=True,on_delete=models.CASCADE)

Answer 1

对于第一个问题，请不要使用HTML表单来执行POST请求。您可以在Click事件侦听器上使用JQuery来侦听提交按钮单击并在事件处理程序中使用$ .post（）向服务器发出POST请求。

请按照以下步骤操作。

步骤1）向表单添加id属性以标识所有表单。

替换

<form action='' method="post" enctype='multipart/form-data'>

与

<form id="a-good-form-name" action="" method="post"  enctype="multipart/form-data">

步骤2）从＆＃34;提交＆＃34;更改按钮类型到＆＃34;按钮＆＃34;避免刷新此外，添加一个类名称以将其标识为＆＃34;提交＆＃34;按钮。

替换

<button type="submit">Save changes</button>

与

<button type="button" class="btn-submit">Save changes</button>

步骤3）创建一个.js文件并通过输入

导入它

<script src="link_of your_file.js"></script>

到html文件。只需将其放入＆lt; head＆gt;＆lt; / head＆gt;部分但它必须在JQuery导入标记下。

步骤4）在事件处理程序中实现事件监听器和$ .post（）函数。

将以下代码添加到刚刚创建的.js文件中

$(document).ready(function () {

    //Put your JQuery or JavaScript code into here

    $("#a-good-form-name .btn-submit").click(function(){
        $.post("the_url_you_like",{
                data_from_form:$('#a-good-form-name [name="textbox1"]').val(),
                int_data: 123321
            },function(data){
                //What you want to do using the data recieved from the server after POST request made sucessfully.
            }
        });
    });
});

对于第二个问题，您可以使用

if self.request.is_ajax():

查明收到的请求是否是AJAX请求。

即

def DetailMfg(request,slug):
    instance=get_object_or_404(ManufacturerProfile,slug=slug)
    form =UpdateManufacturerLogo(request.POST or None ,request.FILES,instance=instance)
    form1 = UpdateManufacturerBackgroundprofileForm(request.POST ,request.FILES,instance=instance)
    if request.method == 'POST' and request.is_ajax():
       if form1.is_valid() and form.is_valid():
          data_you_need=request.POST.get('data_from_form')
          integer_data=request.POST.get('int_data')

          #store data to the database without using form.save() 
          #or do whatever you want using the data

       else:
          form=UpdateManufacturerBackgroundprofileForm(instance=instance)
          form =UpdateManufacturerBackgroundprofileForm(instance=instance)

    context={'instance':instance,
         'distributorprofile':distributorprofile,
         'form':form,
         'form1':form1}
    template_name="gbiz1990/User_function_pages/User_company_info_pages/user_mfgprofile_home.html"
    return render(request,template_name,context)

您必须知道，您不需要＆lt; form＆gt;当您使用AJAX发出POST请求时。您只需要从输入字段中获取所需的所有数据，将它们打包为对象，然后将此对象设置为＆＃34;数据＆＃34;参数

使用Ajax的Django ModelForm可以避免页面刷新

1 个答案: