时间戳

首页 > 解决方案 > 提交帖子请求并点击另一个帖子请求后，如何保持在同一页面上？

javascript - 提交帖子请求并点击另一个帖子请求后，如何保持在同一页面上？

问题描述

我正在做一个单页网站，我想在其中输入一些文本并上传文件。基本上，我希望我的表单在前端的样子是，首先我可以在给定的文本区域中输入一些文本，在下面我应该能够选择多个文件，一旦选择了文件，我将点击上传按钮，文件应该被上传，然后我会点击提交，这就是我创建帖子的方式。

我在下面附上我的代码。我确实写了我损坏的views.py文件，但我现在不附加它。

models.py :
class Post(models.Model): 
    post_body = models.TextField(blank=False, max_length=500)   

class PostMedia(models.Model): 
    file = models.FileField()
    body = models.ForeignKey(Post, on_delete=models.CASCADE) 

forms.py :

from django.forms import ClearableFileInput
from django.forms import ModelForm
from .models import Post, PostMedia


class PostModelForm(ModelForm):
    class Meta:
        model = Post
        fields = ['post_body']


class PostMediaModelForm(ModelForm):
    class Meta:
        model = PostMedia
        fields = ['file']
        widgets = {
            'file': ClearableFileInput(attrs={'multiple': True}),

form.html (I was trying to write the jquery function):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    $('text-form').on('submit',upload(e) {
          e.preventDefault();
          $.post( '../create-post', $('form').serialize(), function( data ) {
               alert( data );
          } );
    });
</script>
    <div class="site-form">
        <h2>Create a New Post here! </h2>
        <form action="." method="post" name="text-form">
            {% csrf_token %}
            {{ form }}
            <br><br>

            <form action="." method="post" name="file-form" enctype="multipart/form-data" data-ajax="false">
                {% csrf_token %}
                {{ file_form }}
                <br><br>
                <input type="submit" value="Upload files" onclick="upload(); return false;"/>
                <br><br>
                <input type="submit" value="Create post"/>
            </form>

        </form>
    </div>

urls.py

 url(r'^/create-post', upload_files, name='create-post'),
 url(r'^/submit-post', submit_post, name='submit-post'),

现在，我希望当我单击上传按钮时，我应该留在同一页面上，但在后台，views.py它应该实际保存选定的文件（考虑到我无法保存文件，除非我保存外键的文本bcz），然后我可以点击提交按钮保存帖子。

我如何实现这一目标？只需提供工作流程也将不胜感激。我对jquery或ajax一无所知，我猜他们在这里做的伎俩..

标签： javascriptjqueryajaxdjangodjango-forms

解决方案

好吧，我想我可以帮助你处理 javascript

<button onclick="upload(); return false;">Upload files<button/>

<input type="submit" id="create_post_button" value="Create post"/>

在第一个脚本标签内添加

$(function() {
     $("#create_post_button").hide();
 });

如果您不希望在上传文件之前显示创建帖子按钮。

然后在上传功能

function upload(){ event.preventDefault(); 
data = new FormData();
data.append( 'file', $( '#file' )[0].files[0] );
//files if is multiple
//is necessaty add an id to make it easier but you can access to the html element with $(input[name='inputname']) if you want to keep wht input type button

$.ajax({
    url: 'url to post',
    data: data,
    processData: false,
    type: 'POST',
    success: function ( data ) {
       $("#create_post_button").show();   

   }
});}

我建议您如果输入文件不应该在表单内，您将其从表单中移开，例如在关闭表单的标签下方，因为如果不是，您将发送文件两次并且没有必要。如果您只想在有文件时这样做，那么您可以上传我建议您这样做的所有表格

在表单中添加一个 id，然后

$("#formreference").submit(function(){
  var formData = new FormData($(this)[0]); //with this form data send to server with a post request similar that the shown before });

我认为阅读提交的dom事件更好，在这种情况下只需要上传功能

function upload(){ event.preventDefault(); $("#create_post_button").show();}

推荐阅读