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']);

Answer 2

您的代码完美无缺。（Example）

将您的表单（如KyleK建议的）更改为：

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

因此，这会将您的问题缩小到只有一个可行的选项。你要么不包括jQuery库（可能是不推荐的版本），要么你测试它的方式是错误的。

简单地尝试一下：

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

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

echo 'uwotm8';

确保您的ajax正常运行。

Answer 3

您似乎需要更改表单代码，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>

让我知道你怎么去

Answer 4

改变这个......

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

或..

$("#post_submit_button").click(function(e){
    e.preventDefault();
    //rest of code
});

并从表单中删除

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>

只需将所有输入放入一个表单即可所以基于这个信息。继承人我会怎么做。

将所有提交按钮设为一个班级......

       <input class='form_submit_button' type="submit" value="upload" />

然后在你的Jquery

       $('.form_submit_button').click(function(e){
            e.preventDefault();
            var form = $(this).parent().serialize();

           $.ajax({
            type: "POST",
            url: "post.php",
            data: form,
            success:function(data){
                //success stuff
            });
        });

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

4 个答案: