gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 06:45:31 25 4
gpt4 key购买 nike

我正在学习 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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com