5

私はjQueryが初めてで、例ごとに学習しようとしています。以下の例では、jQUery Ajaxを使用してアンカータグクリックのイベントでサーブレットを呼び出そうとしています。ページに複数のアンカー タグがあり、それぞれに対して異なるサーブレットを呼び出す必要があります。以下の例のように$('#submit1').click のようなアンカー タグの ID を使用すると、機能しません。しかし、それを「a」に置き換えると、両方のアンカータグに対して同じサーブレットを呼び出すことが機能します

<%@ 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>
4

3 に答える 3

1

私は今、さらに別の問題を抱えています。ユーザーが自分のパスワードを変更できるフォームを、サーブレットからの 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 
    {

    }
}
于 2013-08-26T19:14:47.170 に答える