jQuery Ajax вызывает вызванный сервлет html-ответ

Я получаю форму, которая позволяет пользователю изменять свой пароль как ответ ajax от сервлета. Теперь я добавил функцию ajax для кнопок в новой форме, но когда я нажимаю Сменить пароль, вся форма исчезает, вместо этого я хочу снова вызвать сервлет при нажатии Сменить пароль. Я убедившись, что файл JSP test.jsp, который получает ответ от Ajax вызова уже включает в себя АЯКС логику для ид смены пароля #changePswdjQuery Ajax вызывает вызванный сервлет 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>

Сервлет:

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

Если я правильно понимаю ваш вопрос, НУ нужно изменить эту строку:

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

к этому:

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

Поскольку элемент с идентификатором changePswd не существует на странице изначально (и добавляется с помощью AJAX манипуляции/DOM позже), вам нужно использовать метод «on» вместо метода «click». Обратитесь к документации по API JQuery для получения дополнительной информации о "на" метод:

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

источник

2013-08-26 20:58:10 zigdawgydawg

большой !!! он работает так, как ожидалось, вслух !!! –

jQuery Ajax вызывает вызванный сервлет html-ответ

ответ

Смежные вопросы