Javascript Ajax提交表单没有'；不重新加载页面，但不'；t柱

帮助，我真的不熟悉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>

$（函数（）{
//这将提交一个表单
$（“post#U form”）。关于（“提交”，功能（e）{
e、 预防默认值（）；
$.ajax({
类型：“POST”，
url:“post.php”，
数据：$（“#post_form”）.serialize（），
beforeSend:function（）{
$（'#input_process'）.html（'Loading'）；
},
成功：功能（数据）{
$（“#输入#处理”）.html（数据）；
},
失败：函数（）{
$（“#输入_进程”）.html（'Failed'）；
}
})
})
})

这是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());
    }

?>

---

似乎您需要更改表单代码，POST后缺少双引号，并且不需要添加onsubmit属性，因为您已经在jQuery上处理了该属性

<form name="post_form" id="post_form" action="" method="POST">
      <input type="hidden" name="post_type" value="post" />
      <input type="text" name="userpost"/>
      <input type="submit" name="post_submit" value="post" id="post_submit_button"/>
</form>

请告诉我您的进展情况

更改为此

$(document).on("submit","#post_form", function (e) {...

或者

并从表单中删除此项

onsubmit="return false;"

编辑**

根据你的最新帖子

它不起作用的原因是因为您使用的是多个表单，且具有一个#ID。这是非法的

                    <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>

                    <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>

                    <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>

---

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

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

并在php中获得它

echo ($_POST['variable']);

---

你的代码工作得很好。（）

将您的表格（按照KyleK的建议）更改为：

在PHP脚本中，只需简单地执行以下操作：

echo 'uwotm8';

---

确保您的ajax正确运行。

没错，错误是我输入代码请求帮助时出现的，哈哈。问题不在我的原始代码中。但是仍然不起作用：/hahaha好的，那么，你能更新这个问题，把你的post.php代码也放在这里吗？我把jsfiddle放在这里：看起来很好（jsfiddle抛出错误，因为php不在那里）。我同意KyleK的观点，错误在jquery上，因为如果您已经放置了preventDefault（），那么当您单击submit时，您的表单将无法重新加载。控制台上是否有错误？如果

e.preventDefault（）不工作，请尝试
返回false在绑定结束时。另外，确保bind实际上是通过
console.log（'derp'）之类的东西被调用的并查看您是否正在取回数据！
data: {variable : variable}, //var variable = $("#post_form").serialize(); and check your variable before pass it

echo ($_POST['variable']);

<form name="post_form" id="post_form" action="" method="POST">
.....

$.ajax( {
    type: "POST",
    url: "post.php",
    data: $("#post_form").serialize(),
    success: function(data) {
        console . log(data);
    }
}); 

echo 'uwotm8';