使用 JQUERY UI 向 Django 发送 POST 数据

Posted 2023-02-24

【中文标题】使用 JQUERY UI 向 Django 发送 POST 数据

【英文标题】：Sending POST data using JQUERY UI to Django

【发布时间】：2019-09-05 22:46:10

【问题描述】：

我正在按照 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;

【问题讨论】：

你的问题一点都不清楚。 $.ajax() 是 jQuery.

那么，我需要使用 AJAX 来发送 POST 数据吗？

我以为既然是弹窗就不需要AJAX了

我真的不明白你在说什么。如果不想用Ajax，就不要用Ajax；如果你这样做了，你可以通过 jQuery $.ajax 调用来做到这一点。

如果我的问题不清楚，我深表歉意。我修改了它，我希望它现在更加有用和清晰。我不想使用 AJAX。我的理解是我不需要它。

【参考方案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;