jQuery Ajax調用servlet生成的html響應

我得到一個表單，它允許用戶更改他/她的密碼，作爲來自servlet的ajax響應。現在，我還在新表單中爲按鈕添加了Ajax功能，但是當我點擊更改密碼按鈕時，整個表單正在消失，而我想再次調用servlet時點擊更改密碼。我確保接收來自AJAX調用響應JSP文件test.jsp的已經包括AJAX邏輯更改密碼的ID #changePswdjQuery Ajax調用servlet生成的html響應

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 
    { 

    } 
}

來源

2013-08-26 Naveen Kumar Konda

如果我正確理解你的問題，y OU需要改變這個行：

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

這樣：

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

由於ID爲changePswd元件最初不存在於頁面上（和通過AJAX/DOM操作後加入），你需要使用「on」方法而不是「click」方法。見jQuery的API文檔，瞭解更多有關「開」的方法：

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

來源

2013-08-26 20:58:10 zigdawgydawg

偉大！它現在正在按預期工作，榮譽!!! –

jQuery Ajax調用servlet生成的html響應

回答

相關問題