JQuery Ajax appel à l'ancre tag cliquez sur

Je suis nouveau sur jQuery et d'essayer de les apprendre par exemple par exemple
Dans l'exemple ci-dessous, je suis en train d'appeler un servlet sur un événement de l'ancre tag cliquez sur l'aide de jQUery Ajax. J'ai plus d'une balise d'ancrage dans ma page et je veux une autre servlet être invoquée pour chacun d'eux. Si j'utilise l'id de la balise d'ancrage comme $('#submit1').cliquez sur comme dans l'exemple ci-dessous, il n'est pas de travail. Mais, si je le remplace par " a " c'est le travail qui appelle la même servlet pour les deux balises d'ancrage

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

OriginalL'auteur Naveen Kumar Konda | 2013-08-25

2

id-sélecteur

changement name=submit1

à

id=submit1
```
<a id="submit1" href="#">View Profile</a>
```
ou

l'attribut est égal à-sélecteur

si vous voulez l'accès par a balise par name

changement $('#submit1').click(function(event) {

à

$('a[name="submit1"]').click(function(event) {

grâce Tushar, son travail maintenant
bienvenue 🙂

OriginalL'auteur Tushar Gupta - curioustushar
1

Vous avez besoin de donner id à a pas name, # est le id-sélecteur de sorte que la valeur doit être la valeur de l'attribut id de l'élément
```
<a id="submit1" href="#">View Profile</a>
<a id="submit2" href="#">Course Details</a>
```
grâce Arun, son travail maintenant

OriginalL'auteur Arun P Johny

J'ai encore un autre problème maintenant. Je obtenir un formulaire, qui permet à l'utilisateur de changer son mot de passe, comme ajax réponse à partir d'une servlet. Maintenant, j'ai ajouté des fonctionnalités ajax de boutons dans la nouvelle forme aussi, mais quand je clique sur Changer de Mot de passe bouton, l'ensemble de la forme de fuite, au lieu de cela, je voudrais invoquer une servlet à nouveau en cliquant sur Changer de Mot de passe. Je suis en train assurez-vous que le fichier jsp test.jsp qui reçoit la réponse de l'appel ajax comprend déjà ajax logique pour l'id de changer de mot de passe #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 
{
}
}

Faire comme nouvelle question que seulement plus de gens vont voir à cette question et vous aider à
essayez $('#changePswd').click(function(event) { à $(document).on('click', '#changePswd', function(event) { api.jquery.com/on

OriginalL'auteur Naveen Kumar Konda

Vous devez vous connecter pour publier un commentaire.