亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

比腳本函數晚于運行的 Ajax 操作

比腳本函數晚于運行的 Ajax 操作

喵喔喔 2022-09-11 20:25:54
我正在構建一個django項目,這是一個網站將表單發送到服務器,服務器使用表單剛剛注冊的查詢集和消息字符串“創建新事件成功”進行響應。這是它的代碼:是另一個javascript函數,它將服務器剛剛收到的查詢集顯示為“側邊欄”div。之后,by 將消息追加到結果上方。listeventdocument.getElementById("sidebar").insertAdjacentHTML( 'afterbegin', "Create new event successful." );腳本function makeEvent(event){            event.preventDefault();            var year = event.target.childNodes[3].children[0].value.slice(0,4);            var month = event.target.childNodes[3].children[0].value.slice(5,7);            var day = event.target.childNodes[3].children[0].value.slice(8,10);            var form = $("#makeEventForm");            $.ajax({                type: form.attr('method'),                url: form.attr('action'),                data: form.serialize(),                success: function(response){                    console.log(response);                                       listevent(year, month, day);                    document.getElementById("sidebar").insertAdjacentHTML( 'afterbegin', "Create new event successful." );                },                error: function(request,status,error){                    if (request.status == 599) {                        listevent(year, month, day);                        document.getElementById("sidebar").insertAdjacentHTML( 'afterbegin', "Error : time overlaps with another event" );                    } else {                        alert("code:"+request.status+"\n"+"message:"+status+"\n"+"error:"+error);                    }                },            });        }問題是,當這個函數運行并且ajax操作成功完成時,成功函數()的第二行似乎比第三行晚運行。因此,不會顯示“成功創建新事件”,因為函數會覆蓋 div 中的所有內容。makeEventlistevent(year, month, day);listeventsidebar所以我嘗試在第三行上使用,但似乎一直都不起作用。如果我將時間值設置得足夠大,它就會起作用,但它看起來很糟糕。setTimeout所以,我的問題是:1.成功函數的第二行看起來比第三行晚運行,對嗎?2. 如果是這樣,到第三線運行后第二行結束運行,我該怎么辦?
查看完整描述

2 回答

?
桃花長相依

TA貢獻1860條經驗 獲得超8個贊

這是顯而易見的,因為內部您正在調用Async AJAX,因此它將并行運行,并且顯然將比腳本響應晚于腳本響應,因此腳本將首先執行,然后ajax響應將出現并生效。listevent()


要修復,您可以使用的是ajax方法。這將強制腳本等待 ajax 返回響應。但這不是一個好的做法。async:false


function listevent(year, month, day){

        $.ajax({

            type: "POST",

            url: "{% url 'listevent' %}",

            async:false, // added

            data: {'year':year, 'month':month, 'day':day, 'csrfmiddlewaretoken': '{{ csrf_token }}'},

            dataType: "json",

            success: function(response){

                $("#sidebar").attr('year', year);

                $("#sidebar").attr('month', month);

                $("#sidebar").attr('day', day);

                events = JSON.parse(response.events)

                var str = "<h4>"+year+"/"+month+"/"+day+"</h4><br>"

                if(events.length > 0){

                     events.forEach(event => str += (event['fields']['start_time']+" - "+event['fields']['title']+"<br>"));

                } else {

                    str += "No events currently."

                }

                $("#sidebar").html(str);

                var btn = $("<button></button>").html("New event");

                btn.click(function(){

                    makeEventClick(day);

                });

                $("#sidebar").append(btn);

            },

            error: function(request,status,error){

                   console.log(error);

            },

        });

    }

因此,作為一種良好做法,您可以將下一行移動到 .listevent()


function listevent(year, month, day){

        $.ajax({

            type: "POST",

            url: "{% url 'listevent' %}",

            data: {'year':year, 'month':month, 'day':day, 'csrfmiddlewaretoken': '{{ csrf_token }}'},

            dataType: "json",

            success: function(response){

                $("#sidebar").attr('year', year);

                $("#sidebar").attr('month', month);

                $("#sidebar").attr('day', day);

                events = JSON.parse(response.events)

                var str = "<h4>"+year+"/"+month+"/"+day+"</h4><br>"

                if(events.length > 0){

                     events.forEach(event => str += (event['fields']['start_time']+" - "+event['fields']['title']+"<br>"));

                } else {

                    str += "No events currently."

                }

                $("#sidebar").html(str);

                var btn = $("<button></button>").html("New event");

                btn.click(function(){

                    makeEventClick(day);

                });

                $("#sidebar").append(btn);

                document.getElementById("sidebar").insertAdjacentHTML( 'afterbegin', "Create new event successful." ); // Added

            },

            error: function(request,status,error){

                   console.log(error);

            },

        });

    }


查看完整回答
反對 回復 2022-09-11
?
HUH函數

TA貢獻1836條經驗 獲得超4個贊

似乎是 AJAX 異步工作的情況。 已成功運行,但由于它的 AJAX 操作,代碼不會等到收到響應,這是成功/失敗回調的剩余部分。listevent

調用和AJAX調用開始,而不是等待它完成,它移動到下一行,即listeventdocument.getElementById("sidebar").insertAdjacentHTML( 'afterbegin', "Create new event successful." );

因此,我的建議是在成功回調結束時移動此 n 側。listevent


查看完整回答
反對 回復 2022-09-11
  • 2 回答
  • 0 關注
  • 88 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號