JQuery Ajax 调用锚标记单击答案

【问题标题】：JQuery Ajax call on anchor tag clickJQuery Ajax 调用锚标记单击
【发布时间】：2013-08-27 21:19:50
【问题描述】：

我是 jQuery 新手，并试图通过示例来学习它在下面的示例中，我尝试使用 jQUery Ajax 在锚标记单击事件上调用 servlet。我的页面中有多个锚标记，我希望为每个标记调用不同的 servlet。如果我使用 $('#submit1').click 之类的锚标记 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>

【问题讨论】：

标签： jquery ajax servlets anchor

【解决方案1】：

你需要给id给a而不是name，#是id-selector所以值必须是目标元素的id属性值

<a id="submit1" href="#">View Profile</a>
<a id="submit2" href="#">Course Details</a>

【讨论】：

【解决方案2】：

id-selector

更改name=submit1

到

id=submit1

<a id="submit1" href="#">View Profile</a>

或

attribute-equals-selector

如果你想通过a访问标签name

更改$('#submit1').click(function(event) {

到

$('a[name="submit1"]').click(function(event) {

【讨论】：

【解决方案3】：

我现在还有一个问题。我得到一个表单，允许用户更改他/她的密码，作为来自 servlet 的 ajax 响应。现在，我也为新表单中的按钮添加了 ajax 功能，但是当我单击 Change Password 按钮时，整个表单都消失了，相反，我想在单击 Change 时再次调用 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 
    {

    }
}

【讨论】：

让它成为新问题，而不是只有更多的人会看到这个问题并帮助你
试试$('#changePswd').click(function(event) {到$(document).on('click', '#changePswd', function(event) {api.jquery.com/on