[英]JQuery Ajax call on anchor tag click
我是jQuery的新手,并尝试通过示例学习它在下面的示例中,我尝试使用jquery Ajax在锚标记点击事件上调用servlet。 我的页面中有多个锚标记,我希望为每个标记调用一个不同的servlet。 如果我使用像$('#submit1')这样的锚标记的id 。点击如下例所示它不起作用。 但是,如果我用'a'替换它,它可以为两个锚标签调用相同的servlet
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AJAX calls using Jquery in Servlet</title>
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
$(document).ready(function() {
$('#submit1').click(function(event) {
event.preventDefault();
var username=$('#user').val();
$.get('ActionServlet',{user:username},function(responseText) {
$('#welcometext').text(responseText);
});
});
});
$(document).ajaxStart(function(){
$('#content_progress').text("Loading...");
});
$(document).ajaxComplete(function(){
$('#content_progress').text("");
});
</script>
</head>
<body>
<form id="form1">
<h1>AJAX Demo using Jquery in JSP and Servlet</h1>
Enter your Name:
<input type="text" id="user"/><br>
<a name="submit1" href="#">View Profile</a>
<a name="submit2" href="#">Course Details</a>
<br/>
</form>
<div id="content_progress">
</div>
<div id="welcometext">
</div>
</body>
</html>
你需要给id
到a
没有name
, #
是ID-选择这样的值必须是目标元素的id属性值
<a id="submit1" href="#">View Profile</a>
<a id="submit2" href="#">Course Details</a>
我现在还有另一个问题。 我得到一个表单,允许用户更改他/她的密码,作为来自servlet的ajax响应。 现在,我也在新表单中为按钮添加了ajax功能,但是当我单击“ 更改密码”按钮时,整个表单消失了,相反,我想在单击“ 更改密码”时再次调用servlet。 我确保从ajax调用接收响应的jsp文件test.jsp已包含更改密码id的ajax逻辑#changePswd
test.jsp :
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AJAX calls using Jquery in Servlet</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#submit1').click(function(event) {
event.preventDefault();
$.get('ActionServlet',{request:"form"},function(responseText) {
$('#welcometext').html(responseText);
});
});
$('#changePswd').click(function(event) {
event.preventDefault();
$.get('ActionServlet',{request:"action"},function(responseText) {
$('#content_progress').html(responseText);
});
});
});
$(document).ajaxStart(function(){
$('#content_progress').text("Loading...");
});
$(document).ajaxComplete(function(){
$('#content_progress').text("");
});
</script>
</head>
<body>
<form id="form1">
<h1>AJAX Demo using Jquery in JSP and Servlet</h1>
Enter your Name: <input type="text" id="user" /><br>
<a id="submit1" href="#">View Profile</a>
<a name="submit2" href="#">Course Details</a> <br />
<div id="content_progress"></div>
<div id="welcometext"></div>
</form>
</body>
</html>
Servlet :
package ajaxdemo;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ActionServlet extends HttpServlet
{
private static final long serialVersionUID = 1L;
public ActionServlet() {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
String requestType=null;
String data = null;
requestType = request.getParameter("request").toString();
if(requestType.equals("form"))
{
data = "<form id = \"formChangePswd\"><table><tbody>"
+"<tr><td class=\"style1\">Old Password</td><td class=\"style2\"><input type=\"text\" id=\"oldPswd\" size=\"20\" class=\"textchange\" /></td></tr>"
+"<tr><td class=\"style1\">New Password</td><td class=\"style2\"><input type=\"text\" id=\"newPswd\" size=\"20\" class=\"textchange\"/></td></tr>"
+"<tr><td class=\"style1\">Confirm New Password</td><td class=\"style2\"><input type=\"text\" id=\"confirmPswd\" size=\"20\" class=\"textchange\"/></td></tr>"
+"<tr></tr><tr><td align=\"right\" class=\"style1\"><input type=\"reset\" id=\"reset\" value=\"Reset\" /></td><td class=\"style2\"><input type=\"submit\" id=\"changePswd\" value=\"Change Password\"/></td>"
+"</tr></tbody></table></form>";
}
else if(requestType.equals("action"))
{
data = "Your request is lodged, we will get back to you soon";
}
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(data);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.