Ajax:在GET请求的情况下,页面将被清除

Ajax: in case of GET request, the page clears

本文关键字:清除 情况下 GET 请求 Ajax      更新时间:2023-09-26

EcmaScript 6,jQuery 3.1.0

Fiddle:https://jsfiddle.net/Kifsif/k6gw1gnw/10/

Heroku:https://morning-headland-78510.herokuapp.com/frame/1/

页面上有一个加号。单击它应该在加号的正上方添加一个表单。

问题是,当我通过AJAX添加表单时,它显示在一个空白页面上。

嗯,我不能在Fiddle中模仿它。这一页没有被清除。换句话说,在Fiddle中,一切都是正确的,就像我希望的那样。

请在Chrome或其他浏览器中打开调试器。我放置了两个断点。

在断点1:的调试器中

this._url = "/frame/1/frame_date_create/"

我在没有AJAX的情况下进行了检查。看:https://morning-headland-78510.herokuapp.com/frame/1/frame_date_create/.

表单显示正确。这意味着服务器似乎响应正确。

至于通过AJAX工作,问题是页面会被清除,表单会单独出现在用户面前。在清晰的页面上

下面的代码部分显示了服务器返回的表单。状态为200。

让我们回到JavaScript。成功函数为空。它应该在适当的位置显示表单,但在这种情况下,它只包含一个断点。

在调试器中,问题仍在继续。在断点2处,通常页面已被清除,表单已在屏幕上。但有时断点2处的页面还没有被清除。这种行为上的差异让我有点吃惊。

我创建了一个视频:https://www.youtube.com/watch?v=EhEZVBCK_hw

遗憾的是,光标不可见。0:28是我处于断点2的情况,但页面仍然没有变化。

在AJAX请求的情况下,通常会在POST请求的情况中清除页面。我设法在Stackoverflow上找到了一个关于GET请求这种情况的问题:jquery Ajax转到一个空白页面

你能帮我了解一下这里发生了什么,我在哪里犯了错误,以及如何解决这个问题吗。

<form id="object_form" action="/frame/1/frame_date_create/" method="post">
        <input type="hidden" name="csrfmiddlewaretoken" value="9UWsO6nYgQYHvo0W1QdclHG229IkaDV01YWl4j2Ug1DSOEf4kG5X87vZSsNNWre8">
            <table>
                <tbody><tr><th><label for="id_date">Date:</label></th><td><input id="id_date" name="date" placeholder="ГГГГ-ММ-ДД" type="text" required=""></td></tr>
    <tr><th><label for="id_precision">Точность:</label></th><td><select id="id_precision" name="precision" required="">
    <option value="">----</option>
    <option value="F">Month</option>
    <option value="Y">Year</option>
    <option value="d">Day</option>
    </select><input id="id_frame" name="frame" type="hidden" value="21"></td></tr>
            </tbody></table>
        <a id="submit" href="javascript:void(0)"><span class="glyphicon glyphicon-floppy-save" aria-hidden="true">Save</span></a>

        <a id="cancel" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign" aria-hidden="true">Cancel</span></a>
</form

>

class CreateManager{
...
    _send_get_request(){
        debugger; // 1
        $.ajax({
            method: "GET",
            url: this._url,
            dataType: "html",
            success: this._show_form.bind(this),
            error: general_fail
        });
    }
    _show_form(data){
        debugger; // 2
        // let element = $('#' + this._data_table);
        // element.after(data);
        // this._button_manager.handle_cancel();
        // this._button_manager.handle_submit(this._send_post_request.bind(this));
    }
}

frame_date_create按钮中删除control您正在触发添加的点击事件和更新的点击事件,这会执行2个ajax调用,更新的ajax调用会将ajax结果附加到dom文档