jQuery Ajax 调用 servlet 生成的 html 响应

Question

我得到一个表单，它允许用户更改他/她的密码，作为来自 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 
    {

    }
}

Answer 1

如果我正确理解您的问题，您需要更改此行：

$('#changePswd').click(function(event) {

到这里：

$(document).on('click', '#changePswd', function(event) {

由于页面上最初不存在id为changePswd的元素（稍后通过ajax/DOM操作添加），因此您需要使用“on”方法而不是“click”方法。有关“on”方法的更多信息，请参阅 jQuery API 文档：

http://api.jquery.com/on/