javascript - Ajax提交表单不会重新加载页面但不会发布

Question

救命，我真的不熟悉ajax，我想在不重新加载页面的情况下提交表单。使用下面的代码，它没有重新加载，但它肯定没有发布，甚至没有调用 ajax 函数。

<script type="text/javascript">
$(function() {

//this submits a form
    $("#post_form").on("submit", function (e) {
            e.preventDefault();
           $.ajax({
               type: "POST",
               url: "post.php",
               data: $("#post_form").serialize(),
               beforeSend: function() {
                   $('#input_process').html('Loading');
               },
               success: function(data) {
                   $('#input_process').html(data);
               },
               failure: function(){
                    $('#input_process').html('Failed');
               }

            })
    })
})

</script>

这是 html 表单代码

<div id="input_process"></div>
                    <div id="story_post_input">
                        <form name="post_form" id="post_form" action="" method="POST">
                            <input type="hidden" name="post_type" value="story" />
                            <input type="text" name="post_title"/>
                            <textarea name="userpost"></textarea>
                            <input type="submit" name="post_submit" value="post" id="post_submit_button"/>
                        </form>
                    </div>
                    <div id="shout_post_input">
                        <form name="post_form" id="post_form" action="" method="POST">
                            <input type="hidden" name="post_type" value="shoutout" />
                            <input type="text" name="userpost"/>
                            <input type="submit" name="post_submit" value="shout" id="post_submit_button"/>
                        </form>
                    </div>
                    <div id="image_post_input">
                        <form name="post_form" id="post_form" action="" method="post" enctype="multipart/form-data">
                            <input type="file" name="post_image">
                            <input type="hidden" name="post_type" value="image" />
                            <input type="text" name="userpost"/>
                            <input type="submit" name="post_submit" value="upload" id="post_submit_button"/>

                        </form>
                    </div>

这是 post.php 代码

<?php
    if(isset($_POST['userpost'])){
        $post_type = $_POST['post_type'];
        if($_POST['post_type']=="shoutout"){

            $post = $_POST['userpost'];
            $query = 'INSERT INTO tblpost (post_content, post_date, post_userID, poster, post_type) VALUES ("'.$post.'", now(), "'.$_SESSION["user_ID"].'", "'.$_SESSION["username"].'", "'.$post_type.'" )';
            $result = mysql_query($query) or mysql_error();
            $tmp_post_ID = mysql_insert_id();
            $type = "post";
            notify($type, $tmp_post_ID);

        }
        if($_POST['post_type']=="story"){
            $post_title = $_POST['post_title'];
            $post = $_POST['userpost'];
            $query = 'INSERT INTO tblpost (post_content, post_date, post_userID, poster, post_type, post_title) VALUES ("'.$post.'", now(), "'.$_SESSION["user_ID"].'", "'.$_SESSION["username"].'", "'.$post_type.'", "'.$post_title.'" )';
            $result = mysql_query($query) or mysql_error();
            $tmp_post_ID = mysql_insert_id();
            $type = "post";
            notify($type, $tmp_post_ID);


        }
        if($_POST['post_type']=="image"){
            $tmp_name = $_FILES['post_image']['tmp_name'];
            $user_ID = $_SESSION['user_ID'];
            $post = $_POST['userpost'];
            $img_ID = upload_image($tmp_name,$user_ID);
            $query = 'INSERT INTO tblpost (post_content, post_date, post_userID, poster, post_type, img_ID) VALUES ("'.$post.'", now(), "'.$_SESSION["user_ID"].'", "'.$_SESSION["username"].'", "'.$post_type.'", "'.$img_ID.'" )';
            $result = mysql_query($query) or mysql_error();
            $tmp_post_ID = mysql_insert_id();
            $type = "image";
            notify($type, $tmp_post_ID);


        }
        //header('location:'.curPageURL());
    }

?>

Answer 1

当你将数据从ajax传递到php时

data: {variable : variable}, //var variable = $("#post_form").serialize(); and check your variable before pass it

并在 php 中获取它

echo ($_POST['variable']);