XMLHTTPRequest 在 Bootstrap 模式中发送多次

Question

在我的网页上有一个 Bootstrap5 Modal，它在动画完成时加载数据。 第一次加载时数据是正确的，但是如果我通过单击右上角的 X 关闭模态，单击关闭按钮或单击模态外部，然后打开另一个数据集（播放器）的模态，我有时会得到正确的数据，有时会得到错误的数据。

模态：

<!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Spielerprofil</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body" id="modal-body">
                    <form>
                        <div class="row">
                            <div class="col-6 gx=2">
                                <div class="form-group">
                                    <label for="summonerName">Summoner Name</label>
                                    <input type="text" class="form-control" id="summonerName" aria-describedby="summonerName">
                                </div>
                            </div>
                            <div class="col-6 gx=2">
                                <div class="form-group">
                                    <label for="lineID">LineID</label>
                                    <input type="text" class="form-control" id="lineID" aria-describedby="lineID">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6 gx=2">
                                <div class="form-group">
                                    <label for="arenaRank">Arena</label>
                                    <input type="text" class="form-control" id="arenaRank" aria-describedby="arenaRank">
                                </div>
                            </div>
                            <div class="col-6 gx=2">
                                <div class="form-group">
                                    <label for="rtaRank">RTA</label>
                                    <input type="text" class="form-control" id="rtaRank" aria-describedby="rtaRank">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6 gx=2">
                                <div class="form-group">
                                    <label for="gkRank">GK</label>
                                    <input type="text" class="form-control" id="gkRank" aria-describedby="gkRank">
                                </div>
                            </div>
                            <div class="col-6 gx=2">
                                <div class="form-group">
                                    <label for="bkRank">BK</label>
                                    <input type="text" class="form-control" id="bkRank" aria-describedby="bkRank">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6 gx=2">
                                <div class="form-group">
                                    <label for="active">Aktiv?</label>
                                    <input type="checkbox" class="form-check-input" id="active" aria-describedby="active">
                                </div>
                            </div>
                            <div class="col-6 gx=2">
                                <div class="form-group">
                                    <label for="twink">Twink?</label>
                                    <input type="checkbox" class="form-check-input" id="twink" aria-describedby="twink">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6 gx=2">
                                <label for="competingLevel" class="form-label">Competing Level</label>
                                <input type="range" class="form-range" min="1" max="3" id="competingLevel">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col gx=2">
                                <label class="form-label" id="messageBox"></label>
                            </div>
                        </div>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
                    <button type="submit" class="btn btn-primary" onclick="savePlayerProfile()">Speichern</button>
                  </div>
                </div>
              </div>
            </div>

刷新数据的函数：

function loadPlayerProfile(ID){
                var container = document.getElementById("myModal");
                var myModal = new bootstrap.Modal(container);
                console.log(myModal);
                container.addEventListener("shown.bs.modal", function() {
                    var summonerName, arenaRank, rtaRank, gkRank, bkRank, lineID, active;
                    
                    var xhttp = new XMLHttpRequest();
                    xhttp.onreadystatechange = function(){
                        if (this.readyState==4 && this.status==200) {
                    
                            jsonObj = JSON.parse(this.responseText);
                            
                            summonerName = jsonObj.summonerName;
                            arenaRank = jsonObj.arenaRank;
                            rtaRank = jsonObj.rtaRank;
                            gkRank = jsonObj.gkRank;
                            bkRank = jsonObj.bkRank;
                            lineID = jsonObj.lineID;
                            active = jsonObj.active;
                            twink = jsonObj.twink;
                            competingLevel = jsonObj.competingLevel;
                            
                            document.getElementById('summonerName').value = summonerName;
                            document.getElementById('arenaRank').value = arenaRank;
                            document.getElementById('rtaRank').value = rtaRank;
                            document.getElementById('gkRank').value = gkRank;
                            document.getElementById('bkRank').value = bkRank;
                            document.getElementById('lineID').value = lineID;
                            document.getElementById('active').checked = active;
                            document.getElementById('twink').checked = twink;
                            document.getElementById('competingLevel').value = competingLevel;
                        }
                    }
                    xhttp.open("GET", "./utility.php?f=getMemberProfile&id=" + ID);
                    xhttp.send();
                    
                });
                myModal.show();
            }

Answer 1

我发现了问题。每次单击按钮时，我都会添加一个 EventHandler。我以为 EventHandler 会被覆盖。但它被添加了。所以我从对象中删除了 EventHandler，然后再添加下一个。