JQuery Ajax 调用锚标签点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18426271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Ajax call on anchor tag click
提问by Naveen Kumar Konda
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. I have more than one anchor tag in my page and I want a different servlet to be invoked for each of them. If I use the id of anchor tag like $('#submit1').clickas in below example it is not working. But, if I replace it with 'a' it is working which invokes the same servlet for both of anchor tags
我是 jQuery 的新手，并试图通过示例来学习它在下面的示例中，我尝试使用 jQUEry Ajax 在锚标记单击事件上调用 servlet。我的页面中有多个锚标记，我希望为每个锚标记调用不同的 servlet。如果我使用锚标记的 id，如$('#submit1').click如下例所示，它不起作用。但是，如果我用 '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>
采纳答案by Tushar Gupta - curioustushar
change name=submit1
改变 name=submit1
to
到
id=submit1
id=submit1
<a id="submit1" href="#">View Profile</a>
or
或者
if you want access by atag by name
如果你想通过a标签访问name
change $('#submit1').click(function(event) {
改变 $('#submit1').click(function(event) {
to
到
$('a[name="submit1"]').click(function(event) {
$('a[name="submit1"]').click(function(event) {
回答by Naveen Kumar Konda
I have yet another problem now. I getting a form, that allows user change his/her password, as an ajax response from a servlet. Now, I added ajax functionality to buttons in the new form also, but when I click Change Passwordbutton, the whole form is vanishing, instead, I want to invoke a servlet again on clicking Change Password. I am making sure that jsp file test.jspthat receives response from ajax call already includes ajax logic for the id of change password #changePswd
我现在还有一个问题。我收到一个表单，允许用户更改他/她的密码，作为来自 servlet 的 ajax 响应。现在，我还向新表单中的按钮添加了 ajax 功能，但是当我单击“更改密码”按钮时，整个表单都消失了，相反，我想在单击“更改密码”时再次调用 servlet 。我确保从 ajax 调用接收响应的jsp 文件test.jsp已经包含更改密码#changePswdid 的 ajax 逻辑
test.jsp:
测试.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
{
}
}
回答by Arun P Johny
You need to give idto anot name, #is the id-selectorso 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>
