时间戳

首页 > 解决方案 > 扁平化嵌套的 ajax 请求

javascript - 扁平化嵌套的 ajax 请求

问题描述

我打算在其问题和答案的底部写一个“编辑”链接作为stackoverflow：

我写了一个编辑字形并有一个commend.id

<div class="post-menu pull-left">
    <a class="editCommentLink" href="#">
        <span id="{{ comment.id }}"  class="glyphicon glyphicon-edit" aria-hidden="true">edit </span>
    </a> &nbsp
    <a class="delCommentLink" id="{{ comment.id }}" href="#">
        <span id="{{ comment.id }}" class="glyphicon glyphicon-trash" aria-hidden="true">delete</span>
    </a>
</div>

在javascript中，当点击编辑图标时，向url发出一个ajax get请求，成功后显示一个预先制定的表单；在成功范围内，
我编写了另一个 ajax 来发送更新的评论，它的粗略结构很像：

<script>
$(document).ready(function () {
    $(".editCommentLink").on("click", function (e) {
        e.preventDefault();
        //trigger to show the form template
        $.ajax({
            type: "GET",
            url: `/article/comment/edit/${comment_id}`,
            success: function (data) {
                var commentEditForm = `
            <form action="#" method="post"> {% csrf_token %}
            <textarea></textarea>
            <button class="btn btn-primary" id="editCommentBtn">Save Edits</button >          
            </form >`;
                $commentNew.html(commentEditForm);

                //submit data from the newly emerged form, 
                $("#editCommentBtn").on("click", function (e) {
                    e.preventDefault();
                    $.ajax({
                        type: "POST",
                        url: `/article/comment/edit/${comment_id}`,
                        data: param,
                        success: function (data) {
                            ret = JSON.parse(data);
                            alert(ret['status']);
                            viewedComment = simplemde.options.previewRender(comment);
                            updatedComment = '<p>' + viewedComment + '</p>';
                            alert(comment)
                            $commentNew.html(updatedComment);
                            $additionalInfo.show();
                        },
                    });//post-ajax
                });//submit click event
            },//success
        });//ajax.get
    }); //edit click event
</script>

代码达到了我的预期，
但是嵌套太多，
是否可以用平面代码解决问题？

标签： javascriptjquery

解决方案

委托您的第二次点击事件，将其移到 ajax 事件之外

<script>
$(document).ready(function () {
    $(".editCommentLink").on("click", function (e) {
        e.preventDefault();
        //trigger to show the form template
        $.ajax({
            type: "GET",
            url: `/article/comment/edit/${comment_id}`,
            success: function (data) {
                var commentEditForm = `
            <form action="#" method="post"> {% csrf_token %}
            <textarea></textarea>
            <button class="btn btn-primary" id="editCommentBtn">Save Edits</button >          
            </form >`;
                $commentNew.html(commentEditForm);
            },//success
        });//ajax.get
        //submit data from the newly emerged form, 
    $("body").on("click","#editCommentBtn", function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: `/article/comment/edit/${comment_id}`,
            data: param,
            success: function (data) {
                ret = JSON.parse(data);
                alert(ret['status']);
                viewedComment = simplemde.options.previewRender(comment);
                updatedComment = '<p>' + viewedComment + '</p>';
                alert(comment)
                $commentNew.html(updatedComment);
                $additionalInfo.show();
            },
        });//post-ajax
    });//submit click event
    }); //edit click event
</script>

推荐阅读