使用Jquery和Ajax提交表单而不使用action属性

时间:2016-12-28 17:47:15

标签: php jquery ajax forms

这是我在while循环中的表单

<?php 
                    $sql=mysqli_query($dbconfig,"SELECT * FROM faq ORDER BY faqID DESC");
                    while($faqList=mysqli_fetch_assoc($sql)){
                    ?>
            <form id="myForm" action="#" method="post" enctype="multipart/form-data">
            <input type="hidden" id="xAction" name="xAction" value="answerQ">
            <input type="hidden" id="faqID" name="faqID" value="<?php echo $faqList['faqID']; ?>">
            <textarea class="form-control" id="answer" name="answer" placeholder="Answer to this question" ></textarea>
            <input id="submit" type="submit" value="Answer" class="btn btn-success btn-sm btn-rect"></form>
            <?php } ?>

这是我的Ajax代码

 <script>
    $("#submit").click(function() {
                var faqID= $("#faqID").val();
                var answer= $("#answer").val();
                var xAction= $("#xAction").val();
                $.ajax({
                    type: "POST",
                    url: "insertData.php",
                    data: 'faqID=' + faqID+ '&answer=' + answer+' & xAction=' + xAction,
                    success: function(result) {
                       alert(result);
                    }
                });


            });
    </script>

这是我的inserData.php文件

if($_REQUEST['xAction'] == 'answerQ'){
    $faqID = ($_REQUEST['faqID']);
    $answer = ($_REQUEST['answer']);
    $sql = "UPDATE faq SET answer='".$answer."' WHERE faqID = '".$faqID."'";
    $res = mysql_query($sql) or die(mysql_error());
    if($res){
        header('location:faqList.php?faqID='.$faqID.''); exit;
        }
}

所以我想使用ajax将数据插入到数据库中,但它根本不起作用,但是当我在表单中使用action属性然后它工作但是即使没有ajax我也可以这样做,如果我不得不这样我想要执行仅使用ajax插入数据。

1 个答案:

答案 0 :(得分:1)

脚本中的错误太多。

首先,如果您在while循环中创建表单,则文档不能具有多个具有相同名称的id属性,那么id应该是唯一的,或者您可以使用class。

在js中,您应该从正在提交的特定表单中获取数据。

<script>
$("input[type='submit']").click(function(e) {
            e.preventDefault();        //prevent form to submit
            var formData= $(this).closest('form').serialize();        //fetch form data
            $.ajax({
                type: "POST",
                url: "insertData.php",
                data: formData,
                success: function(result) {
                   alert(result);
                }
            });


        });
</script>

在php脚本中,当您使用ajax提交数据时,不能使用标题重定向用户,您可以使用

 success: function(result) {
               alert(result);
               window.location = "page.php";
            }

希望它能帮到你!!