Question

EcmaScript 6，jQuery 3.1.0

小提琴：https://jsfiddle.net/Kifsif/k6gw1gnw/10/

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

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

问题在于，当我通过AJAX添加表单时，它会显示在空白页面上。

好吧，我无法在小提琴中模仿它。在小提琴中，页面未被清除。换句话说，在小提琴中，一切都是正确的，就像我希望的那样。

请在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的情况，但页面仍然没有改变。

如果发出POST请求，通常会在发生AJAX请求时清除页面。我设法在Stackoverflow上找到关于GET请求的这种情况的一个问题：jquery Ajax goes to a blank page

你能帮我理解这里发生的事情，我犯错误的地方以及如何解决问题。

<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

＆GT;

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

Answer 1

从control按钮中移除frame_date_create类，您将触发添加的click事件和更新的click事件，这会执行2个ajax调用， ajax调用更新将ajax结果附加到dom文档

Ajax：在GET请求的情况下，页面清除

1 个答案: