Question

我在Django上运行一个应用程序作为后端运行，另一个项目用于前端表示。对于后端项目，使用django-rest-framework暴露休息，并且身份验证方法是基于令牌的。

主项目核心运行在127.0.0.1:8000，演示项目工作在127.0.0.1:8001。现在当我在cms上创建Simple页面并将HTML表单作为下面提供的代码放置时，它的工作正常并返回令牌。但问题是它重定向到127.0.0.1:8000，因为url是在表单操作中给出的。

<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为Empty。

*问题可能是jquery ajax帖子不支持跨域查询？

任何解决方案？

我已将功能更新到此但仍然无效。

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);
}

还有其他解决方案吗？

Answer 1

$.post不支持跨域请求。

使用获取请求

实施例

$.ajax({
        url: url,
        type: 'GET',
        dataType: 'jsonp',
        jsonpCallback: 'callback',
        success: function(data) {
             alert(data)
        } 
    });

Answer 2

单击提交按钮后提交表单，导致ajax调用失败。使用preventDefault停止表单的默认操作。

<强> HTML

<button type="button" title="Get Token" 
    onclick="submitme(event,'http://127.0.0.1:8000/api-token-auth/',
         'loginform')">POST</button>

<强>的Javascript

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

Jquery Post返回错误而不是数据

2 个答案: