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);
}
他の解決策はありますか?