使用 JQUERY UI 向 Django 发送 POST 数据

Question

我正在按照 JQUERY UI documentation 中提供的示例创建一个对话框表单。我在表单中有method=POST 和action= "{% url 'example:new_article' %}"，所以我认为当我点击“添加文章”按钮时应该提交表单。我错过了什么吗？我知道使用 AJAX 我会做一些类似的事情的 $.ajax({url: new_article} 我怎么能用 JQuery 和没有 AJAX 做到这一点？我的理解是我不需要 AJAX，因为它是一个弹出式表单。一旦用户创建文章，我不希望表单窗口保持打开状态。我想保存并关闭窗口。

我一直在四处寻找，但找不到显示将 POST 数据发送到 Django 视图的正确方法的示例。

js

<script>
  $( function() {
    var dialog, form,
    exampleName = $( "#exampleName" ),
    articleTitle = $( "#articleTitle" ),
    articleLink = $( "#articleLink" ),
    allFields = $( [] ).add( exampleName ).add( articleTitle ).add( articleLink ),
    tips = $( ".validateTips" );


    function updateTips( t ) {
        tips
            .text( t )
            .addClass( "ui-state-highlight" );
        setTimeout(function() {
            tips.removeClass( "ui-state-highlight", 1500 );
        }, 500 );
    }

    function checkLength( o, n, min, max ) {
        if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Fields cannot be empty or be longer than 255 characters");
        return false;
        } else {
        return true;
        }
    }


    function addArticle() {
    var valid = true;
    allFields.removeClass( "ui-state-error" );

    valid = valid && checkLength( exampleName, "exampleName", 1, 100 );
    valid = valid && checkLength( articleTitle, "articleTitle", 1, 250 );
    valid = valid && checkLength( articleLink, "articleLink", 1, 250 );

    if ( valid ) {
        console.log("made it through validation"
        dialog.dialog( "close" );
    }
    return valid;
    }

    dialog = $( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 400,
    width: 350,
    modal: true,
    buttons: {
        "Add Article": addArticle,
        Cancel: function() {
        dialog.dialog( "close" );
        }
    },
    close: function() {
        form[ 0 ].reset();
        allFields.removeClass( "ui-state-error" );
    }
    });

    form = dialog.find( "form" ).on( "submit", function( event ) {
    event.preventDefault();
    addArticle();
    });

    $( "#create-article" ).button().on( "click", function() {
    dialog.dialog( "open" );
    });
    } );
</script>

index.html

<div id="dialog-form" title="Add Article">
    <p class="validateTips">All form fields are required.</p>
     <form action= "{% url 'example:new_article' %}" method="post">
        {% csrf_token %}
        <fieldset>
        <label for="exampleName">Example</label>
        <input type="text" name="exampleName" id="exampleName" value="" class="text ui-widget-content ui-corner-all">
        <label for="articleTitle">Article Title</label>
        <input type="text" name="articleTitle" id="articleTitle" value="" class="text ui-widget-content ui-corner-all">
        <label for="articleLink">Article Link</label>
        <input type="articleLink" name="articleLink" id="articleLink" value="" class="text ui-widget-content ui-corner-all">
        <!-- Allow form submission with keyboard without duplicating the dialog button -->
        <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
        </fieldset>
    </form>
</div>

urls.py

urlpatterns = [
  path('', views.main, name= "main"),
  path('new_article',views.new_article, name="new_article"),
  ]

views.py

def new_article(request):
    print("made it to views")
    print(request.POST)
    return render (request, 'example/index.html')

我怀疑问题出在：

    if ( valid ) {
    console.log("made it through validation"
    dialog.dialog( "close" );
}
return valid;
}

Answer 1

我确实需要 AJAX。我更改了以下内容：

html

发件人：

<form action= "{% url 'example:new_article' %}" method="post">

收件人：

<form id="new_form">

脚本

发件人：

if ( valid ) {
    dialog.dialog( "close" );
}
return valid;
}

收件人：

if ( valid ) { $.ajax({ url: 'new_article', type: 'POST', data: $('#new_form').serialize() }) dialog.dialog( "close" ); } return valid; }