Ajax formulaire de post servlet sans actualisation

Je comprends que cette question a été fait à la mort donc je vais m'excuser à l'avance, mais je suis tout simplement pas l'obtenir. Ce que je cherche à faire une sorte de système de notation et, bien que j'ai regardé plusieurs exemples dans des tutoriels sur d'autres sites, ils sont tous un peu lourd et pas vraiment ce que je suis après.

J'ai besoin de soumettre un formulaire lorsqu'un bouton radio est sélectionné. Le bouton radio représente un certain nombre dont j'ai besoin pour utiliser côté serveur que j'ai besoin de mettre à jour les bases de données, etc avec cette valeur. Ce dont j'ai besoin après c'est pour la mise à jour de la base de données de la valeur à renvoyer à la page jsp et d'affichage de ce numéro.

Tous le backend choses n'est pas vraiment un problème. Tout ce que je besoin est d'être en mesure d'envoyer les données du formulaire à la servlet et d'obtenir la mise à jour de la valeur de retour sans avoir à recharger la page. Je tiens également à utiliser un post form d'action pour ce faire, si possible, mais qui n'est pas essentielle.

Passer à modifier 3

Est-ce possible sans avoir quelque 200 ligne de JQuery /Ajax script ?

J'ai été aussi loin que

$('#submit').click(function(){
$.ajax({
    url: '/Rating',
    type:'POST',
    data: {
        message: s
    },
    success: 
        function(msg){
            alert("Success");
            //ill want to do something with divs here later i.e a refresh or toggle
        }                   
    });
});

qui j'ai flashé à partir d'autres fils sur ce sujet. J'en ai besoin pour travailler avec le html de base comme la

<form action="/" id="rating" method="Post">
   <input type="radio" name="ra1" onclick="formaction">
   <input type="radio" name="ra1" onclick="formaction">
   <input type="radio" name="ra1" onclick="formaction">
   <input type="radio" name="ra1" onclick="formaction">
   <input type="radio" name="ra1" onclick="formaction">
</form>

Edit: La servlet je veux envoyer l'information est nommé Notation avec une url-pattern /Notation dans mon web.xml fichier. Puis-je obtenir les informations transmises à l'aide d'une requête standard.getAttribute(String valeur) appel et qui de la chaîne de valeur dois-je chercher? "message" ou "s" ?

J'apprécierais toute aide. Merci.

Edit 2: j'ai créé une page de test pour essayer de faire cet ajax trucs de travail. À l'aide de 3nigma la solution que j'ai

<html>
<head>
<script src="jquery-1.7.1.js"></script>
<script>
$(":radio").change(function(){

var formData = $("form").serialize();
console.log(formData);
$.post("/Test",{data:formData},function(val){
//val has the updated value that you will send from the servlet
//do something
});
});
</script>

</head>
<body>
<form action="/Test" id="rating" method="Post">
<input type="radio" name="ra1" />
<input type="radio" name="ra1" />
<input type="radio" name="ra1" />
<input type="radio" name="ra1" />
<input type="radio" name="ra1" />
</form>

</body>
</html>

à l'intérieur de mon Test de la servlet dans la méthode doPost j'ai

request.getAttribute("formData");
request.getAttribute("data");
System.out.println("test");

quand je lance la page jsp et sélectionnez un bouton radio rien ne semble se produire. Le Système.out.println() ne marche pas exécuté ce qui me fait penser qu'il n'est jamais atteindre la servlet.
Ce que quelqu'un voit quelque chose im faire de mal ?

Modifier 3
A finalement obtenu ce travail. Je vais inclure les problèmes que j'ai eus au cas où quelqu'un se coince dans certains de ces mêmes lieux.

Lors de l'envoi à la servlet avec le nom de la Cote de l'adresse url est juste de la "Notation" et non pas "/Rating" comme il peut être en web.xml.

À l'intérieur de la méthode doPost dans le Servlet, demande d'utilisation.getParameter("itemID") pour récupérer les données

La meilleure chose que j'ai fait tout le week-end a été d'installer firebug. C'est à peu près dit moi où j'ai échoué et m'ont mis sur la bonne voie. Grâce à des personnes qui ont répondu.

Le code que j'ai fini par utiliser a été posté par danniehansenweb sauf que je fixe une simple erreur. La virgule à l'intérieur de la data { } ne devrait pas être là. Au lieu de le déplacer à l'extérieur de l'accolade fermante comme

data {itemID : rel },

InformationsquelleAutor Predz | 2012-02-25

0

Vous pouvez simplement utiliser le .cliquez sur l'événement pour les boutons radio.

Un tel exemple pourrait ressembler likethis:

HTML
```
   <input class="doAction" type="radio" name="ra1" rel="1" />
   <input class="doAction" type="radio" name="ra1" rel="2" />
   <input class="doAction" type="radio" name="ra1" rel="3" />
   <input class="doAction" type="radio" name="ra1" rel="4" />
   <input class="doAction" type="radio" name="ra1" rel="5" />
```
JavaScript
```
$(document).ready(function () {
    $('.doAction').click(function () {
        var rel = parseInt($('.doAction:checked').attr('rel'));

        $.ajax({
            type: 'POST',
            dataType: 'json',
            cache: false,
            data: {
                itemID: rel
            }
            url: '/ajax.php',
            success: function (data) {
                if(!data.answer) {
                    alert('Error');
                }
            }
        });
    });
});
```
Ce serait donner à chaque bouton radio un id unique définie dans l'attribut rel. Ensuite, il sera quand le radio bouton est cliqué envoyer une requête ajax ajax.php comme un POSTE. Les données contiendra ce bouton radio est sélectionné.

Puis tout ce que vous avez à faire est de dans votre backend traiter la demande et mettre à jour les lignes de ce qui est sélectionné.
- Est-il possible d'envoyer les données directement à une servlet ? ou dois-je besoin d'utiliser certains secondaire script pour gérer les données et de les envoyer aux servlet alors la servlet répondre à la deuxième script et le secondaire script de répondre de nouveau à la page ? l'espoir qui fait sens
- N'est-ce pas ce que vous essayez de faire est de sauvegarder les paramètres dans une base de données de quelque sorte? Si oui, alors si tu utilise php il suffit de faire un fichier PHP que vous envoyez la demande et ensuite enregistrer les données. Mais qu'entendez-vous par une servlet, ce que j'ai cru que tu voulais dire, c'est une interface de script 🙂
- im en utilisant jsp / java. La servlet a des méthodes comme doGet et doPost qui prendre comme paramètres un HttpServletRequest et HttpServletResponse. Donc, à l'intérieur de cette servlet j'ai voulu utiliser la demande.getAttribute("nom de l'objet transmis par la poste") pour obtenir la valeur et ensuite mettre à jour la base de données. Je ne puis obtenir la nouvelle base de données de la valeur et passer à l'ajax fonction à l'aide d'un répartiteur ou de la réponse.sendRedirect() ou quelque chose. Je n'ai jamais utilisé de JQuery avant et im tout nouveau pour php donc si il était possible d'éviter les scripts php, j'aimerais tête dans cette direction
- Eh bien, si vous pouvez faire votre programme Java écoute sur un port pour le protocole http. Ensuite, vous pouvez envoyer l'ajax "IP:PORT" et puis il suffit de prendre la demande en Java. Vous ne savez pas si il est possible de l'écouter sur un protocole http, mais lui donner un essai 🙂 Si il semble ne pas fonctionner, essayer de regarder node.js - Avec qui vous pourriez avoir un serversice JavaScript auditeur d'attente pour une demande. Une fois arriver il pourrait l'envoyer sur votre application Java.
- merci pour l'aide. Sûrement, il ne peut être que difficile :[
InformationsquelleAutor danniehansenweb
1

Tout ce que je besoin est d'être en mesure d'envoyer les données du formulaire à la servlet et d'obtenir la mise à jour de la valeur de retour

supprimer le onclick gestionnaires
```
<form action="/" id="rating" method="Post">
   <input type="radio" name="ra1" />
   <input type="radio" name="ra1" />
   <input type="radio" name="ra1" />
   <input type="radio" name="ra1" />
   <input type="radio" name="ra1" />
   <input type="button" id="btn" value="submit"/>
</form>
```
sérialiser le formulaire et l'envoyer à la servlet
```
$("#btn").click(function(){

var formData = $("form").serialize();
 $.post("/",{data:formData},function(val){
  //val has the updated value that you will send from the servlet
  //do something
  });
});
```
ici est la houe les données sérialisées ressemblera http://jsfiddle.net/VMgxY/
- à partir d'un style de point de vue j'ai été un peu dans l'espoir d'éviter l'utilisation d'un bouton d'envoi. Si j'ai une servlet nommée Rating.java qui a une url-pattern dans le web.xml fichier de /Notation ne le "/" dans l'appel post juste modifier /Notation? et est la valeur des données récupérées par la requête.getAttribute("données"); ? Merci
- jetez un oeil à ce violon jsfiddle.net/VMgxY/3 il utilise le changement de gestionnaire d'événements, et oui remplacer le / avec le Rating.java ou ce que jamais le chemin que vous avez spécifié... la partie des données que j'ai pu obtenir c'
- Essayé votre code et ne peux pas le faire fonctionner. J'ai mis à jour principale de post à ce sujet. Peut-être que vous pouvez aider. Merci
InformationsquelleAutor Rafay

<form action="/" id="rating" method="Post">
   <input type="radio" name="ra1" onclick="formaction()" value="1">
   <input type="radio" name="ra1" onclick="formaction()" value="2">
   <input type="radio" name="ra1" onclick="formaction()" value="3">
   <input type="radio" name="ra1" onclick="formaction()" value="4">
   <input type="radio" name="ra1" onclick="formaction()" value="5">
</form>

noter le changement dans l'ajout de () d'action, et de la valeur de l'attribut, qui permettra de différencier chacune des valeurs.

Sur chaque clic, le formaction() devrait contenir votre code ajax.

function formaction()
{
     var rating =  $(this).val(); //This captures the radio button's value, which ever clicked
    $.ajax({
        url: '/Test',
        type:'POST',
        data: {
            message: rating
        },
        success: 
            function(msg){
                //msg is the response you got from the server!
                alert("Email Sent");
            }                   
        });
    });
}

InformationsquelleAutor linuxeasy

Vous devez vous connecter pour publier un commentaire.