Jquery/Ajax 表單發布數據不起作用

Question

我不是 Jquery 的專家。 我已經構建了一個 4 步的 html 表單，例如

<form id="msform" enctype="multipart/form-data">
    <fieldset id="publish1" data-check-id="1">
        //some inputs
    </fieldset>
    <fieldset id="publish2" data-check-id="2">
        //some inputs
    </fieldset>
    <fieldset id="publish3" data-check-id="3">
        //some inputs
    </fieldset>
    <fieldset id="publish4" data-check-id="4">
        <input type="submit" class="submit action-button pull-right top-35" value="Publish"/>
    </fieldset>
</form>

在我的 .js 文件中編寫了一些 Jquery 驗證之后，我嘗試通過 ajax 將我的數據傳遞給一個 php 文件。 我的formData函數如下所示：

<script>
    function formData() {
        var serializedValues = jQuery("#msform").serialize();
        var form_data = {
            action: 'ajax_data',
            type: 'post',
            data: serializedValues,
        };
        jQuery.post('mypath/insert.php', form_data); //where data should be sent
        return true;
    }
</script>

四處搜索，我嘗試使用這種結構構建接收數據的 php 文件：

<?php
if (isset($_POST['data'])) {
    post_things();
    return true;
}

function post_things() {
    $title = trim($_POST['form_title']);
    // where form_title is the input[name] of what I want get, serialised into jquery serializedValues variable
    //other similar inputs
    //do something with $title and other $variables
}
?>

我已經初始化了驗證和 ajax 函數，如下所示：

<script>
    $(document).ready(function () {
        msform_init(); //this validate form step by step (it's working!)
        $('#msform').submit(function (event) {
            if (form_completeCheck() && true) { //This check if something empty
                formData();
                if (formData() && true) {
                    window.location.replace("//some redirection to success");
                } else {
                    window.location.replace("//some redirection to failure");
                }
            } else {
                event.preventDefault();
            }
        })
    })
</script>

問題是當我點擊提交時，我被重定向到一個 url 是 mypath 的頁面？ ALL_MY_DATA_SERIALISED。 我的錯誤在哪里？ 由於我的無知，我看不到它。 是在 jquery/ajax 函數中，在 php 文件中還是在我的 html 中？ 預先感謝您的幫助。

Answer 1

HTML腳本

<form id="msform" enctype="multipart/form-data">
    <input type="hidden" name="action" value="do_action"/>
    <fieldset id="publish1" data-check-id="1">
    //some inputs
    </fieldset>
    <fieldset id="publish2" data-check-id="2">
    //some inputs
    </fieldset>
    <fieldset id="publish3" data-check-id="3">
    //some inputs
    </fieldset>
    <fieldset id="publish4" data-check-id="4">
    <input type="button" id="do_action" class="submit action-button pull-right top-35" value="Publish"/>
    </fieldset>
</form>

JavaScript的

$("#do_action").click(function(){
    $.ajax({
        type:'POST',
        data:$("#msform").serialize();
        url:'<<php script url>>',
        success:function(data){
            alert(data);
        }
    });
});

PHP腳本

<?php
    if(isset($_POST['action'])){
        post_things($_POST);
        return true;
    }
    function post_things($request){
        echo "<pre>";
        print_r($request);
        echo "</pre>";
    } 
?>

Answer 2

您只需要在事件監聽器的頂部執行event.preventDefault() ：

$('#msform').submit(function(event){
  event.preventDefault();        
  if(form_completeCheck() && true){ //This check if something empty
    formData();
    if(formData() && true){
        window.location.replace("//some redirection to success");
    } else {
        window.location.replace("//some redirection to failure");
    }
  }

})

Answer 3

重定向的原因是因為您正在提交表單。

由於在您的<form id="msform" enctype="multipart/form-data">您沒有定義將其提交給自身的操作。

您必須使用preventDefault（）阻止表單提交。

 $('#msform').submit(function(event){
   event.preventDefault(); //Add this line
   ..............

Answer 4

如果您的輸入字段中沒有name屬性，則serialize將返回空值，因此請不要忘記添加Name屬性。