ajax不是将发布请求发送到php

Question

Javascript doesn't send any post data to php file

$(document).ready(function(){
                function showComment(){
                  $.ajax({
                    type:"post",
                    url:"process.php",
                    data:"action=showcomment",
                    success:function(data){
                         $("#comment").html(data);
                    }
                  });
                }
                showComment();
$("#button").click(function(){
                      var name = $("#name").val();
                      var message = $("#message").val();
                      var dataString = "name="+name+"&message="+message+"&action=addcomment";
                      $.ajax({
                          type:"post",
                          url:"process.php",
                          data:dataString,
                          success:function(data){
                            showComment();

                          }

                      });

                });
});

form:

<form action="" method="POST" enctype="multipart/form-data">
           name : <input type="text" name="name" id="name"/>
           </br>
           message : <input type="text" name="message" id="message" />
           </br>
           <input type="submit" value="Post" name="submit" id="button">
           <div id="info" />
           <ul id="comment"></ul>
    </form>

php

    $action=$_POST["action"];
if($action=="addcomment"){
    echo "Add comment WORKS!";
}
if($action=="showcomment"){
    echo "default";
}

Tried to add such lines as if post addcomment than show some words, just for a test since sql request didn't but php doesn't show any response at all, like there was no post action at all.

ps. I'm really new ajax so if possible show me a solution to solve it.

Answer 1

You're using a submit button so it will be making the form submit and reload which will bypass your ajax, you can change your jQuery to listen for the form submit event instead like this:

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

    // Stop form from submitting
    e.preventDefault();

    var name = $("#name").val();
    var message = $("#message").val();
    var dataString = "name="+name+"&message="+message+"&action=addcomment";
    $.ajax({
        type:"post",
        url:"process.php",
        data:dataString,
        success:function(data){
            showComment();
        }
    });
});

Or simply change the button from type="submit" to type="button" or replace it with a element.

Answer 2

You are using submit button as Dontfeedthecode mentioned. Your form does not have any action so it is self posting. I have added action and id to the html form and a hidden field to pass the action. Now javascript serialize the form and send it to the process.php.

    $(function () {
        $("#my-form").on("submit", function (e) {
            $("#action").val("addcomment");
            $.ajax(
                {
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (data) {
                        showComment();
                    }
                });
            return false;
        });
    });


<form action="process.php" method="POST" id="my-form" enctype="multipart/form-data">
    <input type="hidden" id="action"  name="action" value="" />

    name : <input type="text" name="name" id="name" />
</br>
message : <input type="text" name="message" id="message" />
</br>
<input type="submit" value="Post" name="submit" id="button">
<div id="info" />
<ul id="comment"></ul>
</form>