使用 ajax 刷新页面的一部分 - 不起作用

Question

以下是我的jsp页面的代码。有一个包含两个文本区域和一个按钮的表单。它有一些 ajax 代码来从 servlet Demo 获取响应并在文本区域内打印响应而不刷新页面。

<form action="Demo">
  <textarea id="txtQuery"></textarea>
  <button type="submit" id="btnRunQuery" value="Run Query" onClick=""></button>
  <textarea id="txtResults"></textarea>
</form>

<script>
$(document).ready(function(){
  $("#btnRunQuery").click(function(){
    $.post("Demo",function(result){
      document.getElementById("txtresults").innerHTML=result;
    });
  });
});
<script>

以下是servlet Demo中的代码。

doPost(HttpServletRequest request, HttpServletResponse response)
{
  String query=request.getParameter("txtQuery");
  //The query is processed and the result is stored in a string solution.
  response.getWriter.print(solution);
}

点击按钮后。结果由 servlet 发送到 jsp 页面，但没有在 textarea 中打印。一个新的空白页面正在打开，结果正在那里显示。我无法理解这段代码中的问题。帮助将不胜感激！

Answer 1

使用e.preventDefault()停止阻止默认提交操作

希望你的网址是/Demo

$("#btnRunQuery").click(function(e){
    e.preventDefault();
    $.post("/Demo",null,function(result){
      document.getElementById("txtresults").innerHTML=result;
    });
  });