JQuery Ajax調用錨標記點擊
[英]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>
3 個解決方案
解決方案1
4 已采納 2013-08-25 06:39:52
解決方案2
1 2013-08-25 06:10:26
你需要給id到a沒有name ， #是ID-選擇這樣的值必須是目標元素的id屬性值
<a id="submit1" href="#">View Profile</a>
<a id="submit2" href="#">Course Details</a>
解決方案3
1 2013-08-26 19:14:47
我現在還有另一個問題。 我得到一個表單，允許用戶更改他/她的密碼，作為來自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
{
}
}
jQuery Ajax調用錨標記單擊+ MVC 4
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.