Question

我是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>

Answer 1

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) {

Answer 2

您需要将id提供给a而不是name，#是id-selector，因此该值必须是目标元素的id属性值

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

Answer 3

我现在还有另一个问题。我得到一个表单，允许用户更改他/她的密码，作为来自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调用锚标记点击

3 个答案: