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

我在学习Jquery，偶然发现了我无法绕过的问题。在下面的例子中，我从互联网上获得了JSP表单（简单加法计算器）和Servlet，它们将两个数字相加在一起，并在按下“计算”按钮时返回结果。JQuery + Ajax - 如何清除重置按钮的结果部分？

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

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

} 
}

任何帮助将不胜感激！

来源

2015-04-17 Myroslav Tedoski

可以用一个简单click()函数来完成：

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

来源

2015-04-17 13:09:18

完美，谢谢！我现在明白了:-) –

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

来源

2015-04-17 13:09:41

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

回答

相关问题