web-dev-qa-db-fra.com

jquery ajax ne fonctionne pas

mon html va comme ça,

<form name="postcontent" id="postcontent">
    <input name="postsubmit" type="submit" id="postsubmit" value="POST"/>
    <textarea id="postdata" name="postdata" placeholder="What's Up ?"></textarea>
</form>

Le code jQuery est comme suit 

$("#postcontent").submit(function(e) {
    $.ajax({
        type:"POST",
        url:"add_new_post.php",
        data:$("#postcontent").serialize(),
        beforeSend:function(){
            $(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
        },success:function(response){   
            //alert(response);
            $("#return_update_msg").html(response); 
            $(".post_submitting").fadeOut(1000);                
        }
    });
});

Lorsque je clique sur le bouton d'envoi, ma demande ajax ne fonctionne pas, il semble que le contrôle soit transmis à la fonction d'envoi JQuery, mais que la demande ajax ne s'exécute pas/ne fonctionne pas correctement, quel est le problème?

jqueryhtmlajax
7
Kiran Gopalakrishnan

place la fonction de gestionnaire d’événements dans $ (document) .ready (function () {...}). ça va marcher maintenant

ajoutez également preventDefault () pour limiter l'actualisation des pages.

$(document).ready(function() {

            $("#postcontent").submit(function(e) {
                e.preventDefault();
                $.ajax({
                    type : "POST",
                    url : "add_new_post.php",
                    data : $("#postcontent").serialize(),
                    beforeSend : function() {
                          $(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
                    },
                    success : function(response) {
                        alert(response);
                        $("#return_update_msg").html(response);
                        $(".post_submitting").fadeOut(1000);
                    }
                });
                e.preventDefault();
            });

        });
8
java seeker

essayez ce code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<Script>
$(document).ready(function(){

$("#postcontent").click(function(e) {

        $.ajax({type:"POST",url:"add_new_post.php",data:$("#postcontent").serialize(),beforeSend:function(){
            $(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
        },success:function(response){   
                    //alert(response);
                    $("#return_update_msg").html(response); 
                    $(".post_submitting").fadeOut(1000);                
            }
        });
   });
});
   </script>

<form name="postcontent" id="postcontent">
              <input name="postsubmit" type="button" id="postsubmit" value="POST"/>
              <textarea id="postdata" name="postdata" placeholder="What's Up ?"></textarea>
 </form>
3
Janak Prajapati

vous devez empêcher le comportement par défaut de votre formulaire lors de la soumission

en ajoutant ceci:

$("#postcontent").on('submit' , function(e) {

  e.preventDefault();

  //then the rest of your code
}
2
Drixson Oseña

Par souci de documentation. J'ai passé deux jours à résoudre un problème ajax et cet après-midi, lorsque j'ai commencé les tests, mon gestionnaire ajax PHP ne s'appelait pas ....

Extraordinairement frustrant.

La solution à mon problème (qui pourrait aider les autres) est la priorité de add_action.

add_action ('wp_ajax_ (mon gestionnaire), array (' nom_classe ',' fonction_statique '), 1);

rappelant que la priorité par défaut = 10

J'obtenais un code de retour de zéro et aucun de mes codes n'était appelé.

... notant que ce n'était pas un problème de WordPress, je me suis probablement mal exprimé sur cette question. Mes excuses.

1
Byron

Je pense que vous avez mis e.preventDefault (); avant appel ajax, c’est pourquoi il évite d’appeler cette fonction et votre appel Ajax n’appellera pas.

Essayez donc de supprimer cet appel e.prevent Default () avant Ajax et ajoutez-le à l'appel après Ajax.

1
Pravin Tukadiya

Essaye ça

    $("#postcontent").submit(function() {
  return false;
};

$('#postsubmit').click(function(){

// your ajax request here
});
0
Ashwin Sinha

Essayez ceci:

<form name="postcontent" id="postcontent">
    <input name="postsubmit" type="submit" id="postsubmit" value="POST"/>
    <textarea id="postdata" name="postdata" placeholder="What's Up ?"></textarea>
</form>
<script>
    (function() {
        $("#postcontent").on('submit', function(e) {
            e.preventDefault();
        $.ajax({
            type:"POST",
            url:"add_new_post.php",
            data:$("#postcontent").serialize(),
            beforeSend:function(){
                $(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
            },success:function(response){   
                //alert(response);
                $("#return_update_msg").html(response); 
                $(".post_submitting").fadeOut(1000);                
            }
        });
   });
})();
</script>
0
lalaland

Je fais un code comme celui-ci 

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
    src="http://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
    $(document).ready(function () {

        $(".work-category a").click(function (e) {
            e.preventDefault();
            var id = $(this).attr('data-id');
            $.ajax({
                url: 'process.php',
                method: 'POST',
                data: {
                    clickCategoryID : id
                },
                dataType: 'JSON',
                success: function (data) {
                    $("#content-area").html(data.Content);
                    $(".container-area").animate({top: '100px'}, 1000);
                    $(".single-content").animate({opacity:1}, 1000);
                }
            });
        });

    });
</script>

Mais le code n'est pas en cours d'exécution et la console a déclaré processa.php non trouvé, bien que le code s'y trouve. 

0
Dev Nath