2

サーブレットからの ajax 応答として、ユーザーがパスワードを変更できるフォームを取得しています。ここで、新しいフォームのボタンにも ajax 機能を追加しましたが、[パスワードの変更] ボタンをクリックすると、フォーム全体が消えてしまいます。代わりに、 [パスワードの変更] をクリックしてサーブレットを再度呼び出したいと思います。ajax 呼び出しからの応答を受け取るjsp ファイルtest.jspに、パスワード変更#changePswdの ID の ajax ロジックが既に含まれていることを確認しています。

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>

サーブレット:

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 
    {

    }
}
4

1 に答える 1

0

あなたの質問を正しく理解できたら、次の行を変更する必要があります。

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

これに：

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

id changePswd を持つ要素は最初はページに存在しない (そして後で ajax/DOM 操作によって追加される) ため、"click" メソッドの代わりに "on" メソッドを使用する必要があります。「on」メソッドの詳細については、jQuery API ドキュメントを参照してください。

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

于 2013-08-26T20:58:10.607 に答える