J'utilise jQuery pour modifier des éléments HTML de la réponse HTTP de JQuery. L'élément de HTML était en effet modifié mais immédiatement renvoyé au contenu original - on dirait que la page a été rafraîchie. S'il vous plaît donner quelques suggestions. Voici mon code.
<form action="" method="get" id="test_form">
<div class="form-group">
<input type="text" class="form-control input-sm" >
<input type="submit" class="btn btn-primary" id="submit-btn" onclick="submit_jquery()" value="">
</div>
</form>
<p id="p_test">123</p>
//// js code
function submit_jquery() {
var i =0;
$.ajax({
type:"GET",
async: false,
url:"http://127.0.0.1:80",
data:{source: i},
dataType:"json",
success:function(data){
j = JSON.stringify(data);
$("#p_test").replaceWith(j);
},
error: function(){
}
});
}
4 Réponses :
La page doit être rechargée car le type de bouton est Soumettre strud> Vous pouvez le modifier à p> <input type="button">
C'est un élément , pourquoi le bouton doit-il être de type ? Le type Soumettre est correct
"Soumettre" rafraîchirait la page. Utiliser le bouton fonctionne. Merci! Une autre solution est Event.PreventDefault (). Est-ce que quelqu'un pourrait poster le code?
Essayez de renvoyer false après l'AJAX. Il empêche la page de rediriger.
Comme vous manipulez la soumission via JQuery / Ajax, vous devez gérer le formulaire Onsubmit Essayez ceci
Lorsque vous traitez avec des formulaires, écoutez toujours le formulaire CODE> Soumettre l'événement de la formulaire CODE> FORMULAIRE plutôt que pour l'événement code> Soumettre CODE> Cliquez sur le bouton. Les deux événements font le feu, mais lorsque vous vous concentrez sur l'événement de clic du bouton, vous ne pouvez pas arrêter l'action par défaut du formulaire lors de son p> Soumettre le bouton code> est cliqué. Je prendrais donc l'approche suivante:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="get" id="test_form">
<div class="form-group">
<input type="text" class="form-control input-sm" >
<input type="submit" class="btn btn-primary" id="submit-btn" value="SUBMIT">
</div>
</form>
<p id="p_test">123</p>