javascript - 使用 AJAX 更新 Div 结果丢失更新

Question

我已经设置了一个简单的页面，该页面应该使用 AJAX 调用的结果来更新 div。它有点有效:调用服务，返回正确的结果，结果文本将出现在 div 中，但是一旦我关闭消息框，div 就会恢复。

我使用的 JavaScript 看起来像这样:

    <script type="text/javascript" src="jquery-2.1.1.js"></script>
    <script>
        function callTestService()
        {
            $.ajax
            ({ 
                url: '/testService/'+document.getElementById('textInput1').value,
                type: 'get',
                error: function ()
                {
                    alert("Error!");
                }
            }).done(function (data)
                    {
                        //$('#resultsDiv').html(data);
                        document.getElementById("resultsDiv").innerHTML = data;
                        alert("Done!");
                    }) ;
        }
    </script>
    <div id="resultsDiv" style="min-height: 50px; min-width: 50px; " />
    <form onsubmit="callTestService()">
        <input id="textInput" />
        <button>Done!</button>
    </form>

Answer 1

伊戈尔的答案很可能是正确的(很难说，因为我们没有你程序的其余部分)。您还应该能够从表单处理程序返回 false，以便浏览器不会实际提交表单并刷新页面。

或者

<form onsubmit="callTestService(); return false">