Javascript 使用AJAX结果更新的Div丢失更新

我已经设置了一个简单的页面，该页面应该使用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>

函数callTestService（）
{
$.ajax
({ 
url:'/testService/'+document.getElementById（'textInput1'）。值，
键入：“get”，
错误：函数（）
{
警报（“错误！”）；
}
}).完成（功能（数据）
{
//$（'#resultsDiv'）.html（数据）；
document.getElementById（“resultsDiv”）.innerHTML=数据；
警报（“完成！”）；
}) ;
}
完成！

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

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

应该是：

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

---

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

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

应该是：

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

---

使用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>

$（“#myBtn”）。单击（函数（）
{
$.ajax
({ 
url:'/testService/'+document.getElementById（'textInput1'）。值，
键入：“get”，
错误：函数（）
{
警报（“错误！”）；
};
成功：功能（数据）
{
警报（“完成！”）；
$（'#resultsDiv'）.html（数据）；
};
});
});

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标记是一个容器标记，因此它需要关闭，即

使用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>

$（“#myBtn”）。单击（函数（）
{
$.ajax
({ 
url:'/testService/'+document.getElementById（'textInput1'）。值，
键入：“get”，
错误：函数（）
{
警报（“错误！”）；
};
成功：功能（数据）
{
警报（“完成！”）；
$（'#resultsDiv'）.html（数据）；
};
});
});

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标记是一个容器标记，因此它需要关闭，即

按钮

html元素的默认类型是
提交
。调用
ajax
后，表单将被提交，因此页面将重新加载来自服务器的原始html。更改：

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


完成！
按钮
html元素的默认类型是
提交
。调用
ajax
后，表单将被提交，因此页面将重新加载来自服务器的原始html。更改：

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


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

或

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

或



函数callTestService（）{
$.ajax
({
url:'/testService/'+document.getElementById（'textInput1'）。值，
键入：“get”，
错误：函数（）{
警报（“错误！”）；
}
}).完成（功能（数据）{
//$（'#resultsDiv'）.html（数据）；
document.getElementById（“resultsDiv”）.innerHTML=数据；
警报（“完成！”）；
});
返回false；
}
完成！

函数callTestService（）{
$.ajax
({
url:'/testService/'+document.getElementById（'textInput1'）。值，
键入：“get”，
错误：函数（）{
警报（“错误！”）；
}
}).完成（功能（数据）{
//$（'#resultsDiv'）.html（数据）；
document.getElementById（“resultsDiv”）.innerHTML=数据；
警报（“完成！”）；
});
返回false；
}
完成！
在哪里调用函数？您必须有另一个函数/脚本修改div，或者可能两次调用此函数，第二次给出空结果您是对的。。。正在更新代码示例…仅针对GRIN，使用结果更改两个div，并查看它们是否都被还原。我认为您的代码是可靠的，并且您的程序的某些其他部分可能正在恢复问题中的div。您在哪里调用您的函数？您必须有另一个函数/脚本修改div，或者可能两次调用此函数，第二次给出空结果您是对的。。。正在更新代码示例…仅针对GRIN，使用结果更改两个div，并查看它们是否都被还原。我认为您的代码是可靠的，您的程序的其他部分可能正在恢复问题中的div，正如注释所示，jQuery已弃用success（），您应该移动到问题中所示的等效done（）。正如注释所示，jQuery已弃用success（），您应该移动到等效done（）正如问题中所指出的，这是一个好的捕获。这听起来是个问题。您还应该能够从表单提交处理程序返回false，这将不会刷新页面。不，这对我不起作用。在我取消对话后，div仍然恢复。如果你想让它工作，你必须添加