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

button html元素的默认类型为submit。在ajax调用之后，表单将被提交，因此页面将重新加载来自服务器的原始html。变化：

<form>
  <input id="textInput" />
  <button type="button" onclick="callTestService()">Done!</button>
</form>

Answer 2

Igor的答案很可能是正确的（很难说，因为我们没有其他程序）。您还应该能够从表单处理程序返回false，以便浏览器不会实际提交表单并刷新页面。

或者

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

Answer 3

我不确定这是否会导致问题，但您的标记无效：

<div id="resultsDiv" style="min-height: 50px; min-width: 50px; " />

应该是：

<div id="resultsDiv" style="min-height: 50px; min-width: 50px;"></div>

Answer 4

尝试使用ajax成功方法并且没有表单提交，即：

<强>的JavaScript

<script>
    $("#myBtn").click(function()
    {
        $.ajax
        ({ 
            url: '/testService/'+document.getElementById('textInput1').value,
            type: 'get',
            error: function ()
            {
                alert("Error!");
            };
            success: function (data)
            {
                    alert("Done!");
                    $('#resultsDiv').html(data);
            };
        });
    });
</script>

<强> HTML：

<div id="resultsDiv" style="min-height: 50px; min-width: 50px;"></div>
<form>
    <input id="textInput" />
    <input type="button" id="myBtn">Done!</button>
</form>

此外div标签是一个容器标签，因此需要关闭，即<div></div>

Answer 5

<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!");
        });

        return false;
    }

</script>
<div id="resultsDiv" style="min-height: 50px; min-width: 50px; "> </div>
<form onsubmit="return callTestService(); ">
    <input id="textInput" />
    <button>Done!</button>
</form>

使用AJAX更新的Div失败更新

5 个答案: