Question

我想将Ajax请求发送到服务器并获取HTML文本。我发现服务器成功接收了请求并可以使用DB，但是Ajax请求在某些时候被中止并且无法加载数据。我不知道会发生什么..

JS

const listGroup = document.getElementById("list-group");

    function sendData() {
        const form = document.getElementById("create-memo-form");
        const formData = new FormData(form);
        const XHR = new XMLHttpRequest();
        let urlEncodedData;
        const urlEncodedDataPairs = [];

        for(let pair of formData) {
            urlEncodedDataPairs.push(encodeURIComponent(pair[0]) + '=' + encodeURIComponent(pair[1]));
        }

        urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');



        XHR.addEventListener('loadstart', function() {
            console.log("loadstart");
        });
        XHR.addEventListener('load', function() {
            console.log("load");
        });
        XHR.addEventListener('loadend', function() {
            console.log("loadend");
        });
        XHR.addEventListener('progress', function() {
            console.log("progress");
        });
        XHR.addEventListener('error', function() {
            console.log("error");
        });
        XHR.addEventListener('abort', function() {
            console.log("abort");
        });

        XHR.onreadystatechange = function() {
            console.log(XHR.readyState + ' ' + XHR.status);
            if(XHR.readyState === XMLHttpRequest.DONE) {
                console.log(XHR.getAllResponseHeaders());
            }

            if (XHR.readyState === XMLHttpRequest.DONE && XHR.status === 200 ) {

                console.log(XHR.responseText);
                //listGroup.removeChild(listGroup.childNodes[0]);
                //listGroup.innerHTML = XHR.responseText + listGroup.innerHTML;
            }
        };


        XHR.open('POST', 'create-memo');

        XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        XHR.send(urlEncodedData);
    }

createMemoForm.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="list-group-item">
    <form:form modelAttribute="newMemo" id="create-memo-form">
        <form:input path="content" /><br>
        <button onclick="sendData()">Write</button><br>
        <form:errors cssClass="error" />
    </form:form>
</div>

createMemoSuccess.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="createMemoForm.jsp" />
<div class="list-group-item">
    <h4 class="list-group-item-heading">${createdMemo.content}</h4>
    <div class="memo-btn-group">
        <span class="write glyphicon glyphicon-pencil"></span>
        <span class="glyphicon glyphicon-trash">Delete</span>
        <span class="label ${createdMemo.cssClass}">${createdMemo.priorityString}</span>
        <span>${createdMemo.deadline}</span>
    </div>
</div>

控制器

@RequestMapping("/create-memo")
    public String createMemo(Model model, @ModelAttribute("newMemo") Memo newMemo, BindingResult bindingResult, HttpSession session) {
        System.out.println("inside createMemo method");
        Member currentMember = (Member) session.getAttribute("currentMember");
        newMemo.setMemberId(currentMember.getId());
        if(memoService.addMemo(newMemo)) {
            model.addAttribute("newMemo", new Memo());
            model.addAttribute("createdMemo", newMemo);
            System.out.println("A");
            return "createMemoSuccess";
        } else {
            bindingResult.reject("create-memo-failure", "Failed to write");
            System.out.println("B");
            return "createMemoForm";
        }
    }

Firefox控制台打印以下行：

2 0
4 0

abort 
loadend

为什么Ajax请求被中止？

0 个答案: