[英]JQuery Ajax call on anchor tag click
I am new to jQuery and trying to learn it example by example In the below example, I am trying to call a servlet on an event of anchor tag click using jQUery Ajax. 我是jQuery的新手,并尝试通过示例学习它在下面的示例中,我尝试使用jquery Ajax在锚标记点击事件上调用servlet。 I have more than one anchor tag in my page and I want a different servlet to be invoked for each of them.
我的页面中有多个锚标记,我希望为每个标记调用一个不同的servlet。 If I use the id of anchor tag like $('#submit1').click as in below example it is not working.
如果我使用像$('#submit1')这样的锚标记的id 。点击如下例所示它不起作用。 But, if I replace it with 'a' it is working which invokes the same servlet for both of anchor tags
但是,如果我用'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>
change name=submit1
更改
name=submit1
to 至
id=submit1
<a id="submit1" href="#">View Profile</a>
or 要么
attribute-equals-selector 属性-等于选择器
if you want access by a
tag by name
如果你想通过访问
a
由标签name
change $('#submit1').click(function(event) {
更改
$('#submit1').click(function(event) {
to 至
$('a[name="submit1"]').click(function(event) {
You need to give id
to a
not name
, #
is the id-selector so the value must be the id attribute value of the targeted element 你需要给
id
到a
没有name
, #
是ID-选择这样的值必须是目标元素的id属性值
<a id="submit1" href="#">View Profile</a>
<a id="submit2" href="#">Course Details</a>
I have yet another problem now. 我现在还有另一个问题。 I getting a form, that allows user change his/her password, as an ajax response from a servlet.
我得到一个表单,允许用户更改他/她的密码,作为来自servlet的ajax响应。 Now, I added ajax functionality to buttons in the new form also, but when I click Change Password button, the whole form is vanishing, instead, I want to invoke a servlet again on clicking Change Password .
现在,我也在新表单中为按钮添加了ajax功能,但是当我单击“ 更改密码”按钮时,整个表单消失了,相反,我想在单击“ 更改密码”时再次调用servlet。 I am making sure that jsp file test.jsp that receives response from ajax call already includes ajax logic for the id of change password #changePswd
我确保从ajax调用接收响应的jsp文件test.jsp已包含更改密码id的ajax逻辑#changePswd
test.jsp : 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 : 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.