Ajax pas de traitement lorsque le bouton est cliqué

Question

J'essaie donc d'utiliser une simple fonction Ajax dans un JSP en utilisant le JQueryUI. Je passe simplement deux champs de texte qui sont utilisés dans un formulaire, et essaye de remplir deux divs avec eux. Rien ne se passe du tout lorsque je clique sur le bouton, j'ai essayé de mettre console.logs dans la fonction ajax et rien ne s'imprime.

code JSP pour cliquage appel (jquery complet à la demande)

<script type="text/javascript"> 
     $('#saveBtn').click(function() { 
      //define the handler function for click event inline (it doesn't need a name because we're just using it one time) 
      // get the value of the search box 
      console.log("you are in the ajax"); 
      var addressValue = $("#address").val(); 
      var creditValue = $('#creditcard').val(); 
      System.out.println("you are in the function"); 
      // send to the server (this is relative to our current page) 
      $.ajax({ 

      url: "actions.InfoAjax.action", 
      data: { // this is an embedded JSON object we'll send to server 
       address: addressValue, 
       creditcard: creditValue 
      }, 
      dataType: 'json', // tell JQuery to expect JSON back from the server 
      success: function(ret) { // this is called as soon as the server returns 

       console.log(ret.address); 
       console.log(ret.creditcard); 
       $('#savedAddress').html(ret.address); 
       $('#savedCC').html(ret.creditcard); 


      }//success 
      });//ajax 

     });//click 
     });//ready 
    </script> 

Voici mon html:

<form action="post"> 
      <input type = "text" name="address" placeholder="Address" ></input></br> 
      <input type = "text" name="creditcard" placeholder="Credit Card Number"> </input></br> 
      <button type ="button" class ="btn btn-small" id="saveBtn">Save</button> 
</form> 

J'ai essayé d'obtenir ce à travailler pendant des heures, toute aide est apprécié.

Voici les erreurs que je reçois de la console:

readyState: 4 
responseText: " 
↵ 
↵{ 
↵ "address": [null], 
↵ "creditcard": [ test ] 
↵} 
↵ 
↵" 

1: "parsererror" 
2: SyntaxError 
get stack: function() { [native code] } 
message: "Unexpected token e" 
set stack: function() { [native code] } 
__proto__: Error 
callee: function() { 
length: 3 
__proto__: Object 

Answer 1

Essayez et nous dire

//System.out.println ?? check this 
});//ajax 
    return false; 
});//click 

Answer 2

Essayez:

$('#saveBtn').click(function (e) { //define the handler function for click event inline (it doesn't need a name because we're just using it one time) 
    e.preventDefault(); 
    // get the value of the search box 
    console.log("you are in the ajax"); 
    var addressValue = $("#address").val(); 
    var creditValue = $('#creditcard').val(); 
    //System.out.println("you are in the function"); 
    // send to the server (this is relative to our current page) 
    $.ajax({ 

     url : "actions.InfoAjax.action", 
     data : { // this is an embedded JSON object we'll send to server 
      address : addressValue, 
      creditcard : creditValue 
     }, 
     dataType : 'json', // tell JQuery to expect JSON back from the server 
     success : function (ret) { // this is called as soon as the server returns 

      console.log(ret.address); 
      console.log(ret.creditcard); 
      $('#savedAddress').html(ret.address); 
      $('#savedCC').html(ret.creditcard); 

     }, //success 
     error : function() { 
      console.log(arguments); 
     } 
    }); //ajax 

}); //click 

Answer 3

De jQuery Docs, .cliquez est un raccourci pour .on ('click', handler), essayez avec

$(".foo").on("click", function(){ 
    //your code here 
}); 

Assurez-vous également que votre fichier JS contenant le code ou le script inline est chargé, avec jQuery au chargement de la page.

Answer 4

$('#foo').click(function() { 
    return false; 
}); 

$('#foo').live('click', function() { 
    return false; 
}); 

Essayez-le. "return false" sur la dernière ligne avant de fermer la fonction peut fonctionner.

Answer 5

Vous pouvez également créer une nouvelle fonction. Faire un formulaire:

$(document).ready(function() { 
    $('#foo').submit(function() { 
     // function here. try it! 
     return false; 
    }); 
});