1

Django でバックエンドとして実行されているアプリケーションと、フロントエンド プレゼンテーション用の別のプロジェクトが 1 つあります。バックエンド プロジェクトは django-rest-framework を使用して REST に公開され、認証方法はトークン ベースです。

メイン プロジェクト コアは 127.0.0.1:8000 で実行され、プレゼンテーション プロジェクトは 127.0.0.1:8001 で動作しています。cmsでシンプルなページを作成し、以下に示すコードとしてHTMLフォームを配置すると、正常に動作し、トークンが返されます。しかし問題は、フォーム アクションで URL が指定されているため、127.0.0.1:8000 にリダイレクトされることです。

<form action="http://127.0.0.1:8000/api-token-auth/" class=" form-inline" method="post" id="loginform">

    <div id="div_id_username" class="clearfix control-group">
        <div class="controls">
            <Label class="span4">Username:</label>
            <input style="height: 25px" type="text" name="username" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_username">
        </div>
    </div>
    <div id="div_id_password" class="clearfix control-group">
        <div class="controls">
            <Label class="span4">Password:</label>
            <input style="height: 25px" type="password" name="password" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_password">
        </div>
    </div>
    <div class="form-actions-no-box">
         <button type="submit" title="Get Token">POST</button>
    </div>
</form>

送信時の応答は次のとおりです。

{'token':'fdsf4d6a4d6a4d64ad4ada54d65a4'}

このコードをjquery Postに変更すると:

コード:

<form action="http://127.0.0.1:8000/api-token-auth/" class=" form-inline" method="post" id="loginform">

    <div id="div_id_username" class="clearfix control-group">
        <div class="controls">
            <Label class="span4">Username:</label>
            <input style="height: 25px" type="text" name="username" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_username">
        </div>
    </div>
    <div id="div_id_password" class="clearfix control-group">
        <div class="controls">
            <Label class="span4">Password:</label>
            <input style="height: 25px" type="password" name="password" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_password">
        </div>
    </div>
    <div class="form-actions-no-box">
         <button type="button" title="Get Token" onclick="submitme('http://127.0.0.1:8000/api-token-auth/', 'loginform')">POST</button>
    </div>
</form>

クリック時に呼び出されるJquery関数:

function submitme(url, formid)
{
    $.post(url, $("#" +formid).serialize())
            .done(function() { alert("second success"); })
            .fail(function(jqXHR, textStatus, errorThrown) { alert(textStatus); alert(errorThrown);})
            .always(function() { alert("finished"); }
        );
    location.reload();
}

エラーは textStatus として表示されますが、errorThrown は空です。

*問題は、jquery ajax post がクロス ドメイン クエリをサポートしていないことでしょうか?

  • 解決策はありますか?

これに機能を更新しましたが、まだ機能していません。

function submitme(url, formid)
{
    $.ajax({
        url: url,
        type: 'POST',
        data: $("#" +formid).serialize(),
        dataType: 'jsonp',
        jsonpCallback: 'callback',
        success: function(data) {
             alert(data);
        }
    });
}
function callback(data)
{
    alert(data);
}

他の解決策はありますか?

4

2 に答える 2