JQuery + Ajax - 如何使用重置按钮清除结果部分？-6ren

JQuery + Ajax - 如何使用重置按钮清除结果部分？

转载作者：行者123 更新时间：2023-12-01 06:45:31

25

4

我正在学习 Jquery 并偶然发现了我无法绕过的问题。在我从互联网上获得的以下示例中，我有 JSP 表单(简单加法计算器)和 Servlet，它将两个数字相加并在按下“计算”按钮时返回结果。

我的问题是，我找不到按“重置”按钮后如何清除 JSP 结果部分的方法。我正在谈论的部分是这样的:<div id="result"></div>在 JSP 文件的末尾。

JSP:

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ajax Example in JSP And Servlet</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
 $('#btn').click(function() {

  var data = $('#xForm').serializeArray();


 $.ajax({
   type:"POST",
   url:"CalcAjax",
   data:data,
   cache: false,
   success:function(msg)
   {
    $("#result").hide();
    $("#result").html("Addition Value is: " + msg + " ").fadeIn("slow");
   }
  });

 });
});
</script>


</head>
<body>
<form id="xForm" method="post" ACTION="/CalcAjax">
 Enter number1:
 <input id="number" type="text" name="number" />
 Enter number2:
 <input id="number1" type="text" name="number1" />
 <input id="btn" type="button" value="Calculate" name="btn"/>&nbsp;&nbsp;
 <input id="reset" type="reset" name="reset" value="Reset"/>
</form>
<div id="result"></div>
</body>
</html>

Servlet:

package com.test;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.RequestDispatcher;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CalcAjax extends HttpServlet {
private static final long serialVersionUID = 1L;

String redir="";
String urlencode=""; 

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  try { 
            redir=("/ajax.jsp");
            urlencode = response.encodeRedirectURL(redir.toString());
            response.sendRedirect(urlencode);

        } catch (Throwable t) {
            RequestDispatcher dispatcher4 = request.getRequestDispatcher("/ajax.jsp");
            dispatcher4.forward(request, response);
        } 
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // TODO Auto-generated method stub
    int number = 0,number1=0;

    number = Integer.parseInt(request.getParameter("number"));
    number1 = Integer.parseInt(request.getParameter("number1"));

    PrintWriter out=response.getWriter();
    out.println(number+number1+" <br>");

 }
}

任何帮助将不胜感激!

最佳答案

可以通过一个简单的click()函数来完成:

$("#reset").click(function(){
  $("#result").empty();
});

关于JQuery + Ajax - 如何使用重置按钮清除结果部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29700073/

25

4

0

文章推荐： java.lang.NumberFormatException : For input string: "9813023219"

文章推荐： python - FLASK REST API 在 POST 上返回 400

文章推荐： jquery - Bootstrap 中选择元素的替代方案

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

JQuery + Ajax - 如何使用重置按钮清除结果部分？