AJAX請求僅發生一次（PHP表單請求）

Question

這大致是我對main.php文件所擁有的。一種形式，然后是顯示數據的位置，然后是javascript：

<form>
    <center><h3>Add new person:</h3></center>
    <div class="errors"></div>
    <input id="nameOfFruit" class="form-control" type="text" placeholder="Name" />
    <select id="typeOfFruit" class="selectpicker"  data-width="100%">
        <option data-name="99">Select Fruit...</option>
        <option data-name="1">Tomato</option>
        <option data-name="2">Banana</option>
        <option data-name="3">Grape</option>
    </select>
    <select id="nOfFruit" class="selectpicker"  data-width="100%">
        <option data-name="99"># of Fruit...</option>
        <option data-name="1">1</option>
        <option data-name="2">2</option>
        <option data-name="3">3</option>
    </select>
    <a href="#" class="btn" id="addFruit">ADD</a>
</form>

該選擇器是Silvio Moreto網站上的引導程序添加。 接下來，我有一些代碼，這些數據的表將出現在這些表中，並正在從數據庫中讀取。 最后，我有JavaScript：

<script>
    $(document).ready(function () {
        $('#wlFloorplans').selectpicker();
        $('#wlBedrooms').selectpicker();
    });

    jQuery('#addFruit').click(function () {

        var $opt = $("#typeOfFruit option:selected");
        var fruitString = $opt.attr("data-name");

        var str = "name=" + jQuery("#nameOfFruit").val()
            + "&type=" + fruitString
            + "&number=" + jQuery("#nOfFruit").val();

        jQuery.ajax({
            type: "post",
            url: "/adding_fruit.php",
            data: str,
            dataType: "json",
            success: function(result) {
                if (result.success == 1) {
                    $(document).ajaxStop(function () { location.reload(true); });
                    $('#typeOfFruit').selectpicker();
                    $('#nOfFruit').selectpicker();
                }
                else {
                    jQuery(".errors").html(result.errors);
                }
            }
        });
    });
</script>

問題是，每次我填寫表格時，都會發生以下兩種情況之一：

一種。 第一次填充它時，它將通過ajax調用，並且不會在數據庫中放入任何數據。 然后，下次我嘗試時，它將起作用。 b。 第一次嘗試填寫表單，它將起作用（所有數據進入數據庫，在表中輸出），但是第二次，當我按下添加按鈕時，所有字段都將自身刪除，但沒有任何結果放入數據庫。

編輯：我的adding_fruit.php文件：

<?php
try {
    //DB SETUP
}
catch(PDOException $ex) {
}

$name = trim(isset($_POST['name']) ? $_POST['name'] : '');
$type = trim(isset($_POST['type']) ? $_POST['type'] : '');
$number = trim(isset($_POST['number']) ? $_POST['number'] : '');

$errors = Array();
if (sizeof($_POST) > 0) {
    if ($name === '') {
        $errors[] = '<div class="alert" role="alert">NEED A NAME</div>';
    }
}

if (sizeof($errors) > 0 || sizeof($_POST) == 0) {
    $result = array(
        "errors" => implode("", $errors),
        "success" => 0);
    die(json_encode($result));
}

$randID = md5(uniqid(rand(), true));

$sql = "INSERT INTO waitlist (id, name, type, number)
        VALUES ('".$randID."', '".$name."', '".$type."', '".$number."')";

$sth = $db->prepare($sql);
$sth->execute();

$result = array(
    "success" => 1);
die(json_encode($result));
?>

您看到我的代碼有問題嗎？

Answer 1

使用ajax時，您不應重新加載整個頁面。 這就是使用ajax的全部要點（不必重新加載頁面）。 我認為您正在尋找的是在用戶提交並服務器響應后清除表單（重置為原始狀態）。

嘗試這個：

jQuery的

jQuery.ajax({
            type: "post",
            url: "/adding_fruit.php",
            data: str,
            dataType: "json",
            success: function(result) {
                if (result.success == 1) {
                    $('form').trigger("reset"); //Reset to the original state of the form
                    $('#typeOfFruit').selectpicker();
                    $('#nOfFruit').selectpicker();
                }
                else {
                    jQuery(".errors").html(result.errors);
                }
            }
        });

的

$(document).ajaxStop(function () { location.reload(true); });

不需要，因為ajaxStop是在ajax ajaxStop完成哪個ajax調用時執行的，而不是針對像這樣的特定調用執行的。 從文檔中：

“只要Ajax請求完成，jQuery就會檢查是否還有其他未完成的Ajax請求。如果沒有其他請求，jQuery會觸發ajaxStop事件。”

當在代碼中到達done()時，ajax將被“完成”以進行特定的調用，因此那里不需要ajaxStop() 。 因此，如果您想在調用后重新加載整個頁面，請執行以下操作：

//This would reload the whole page 
//(just as you were hitting the reload-button in the browser)
location.reload(true); 

的PHP：

die(json_encode($result)); 說結束應用程序，但是您真正想要的是返回數據：

echo json_encode($result);
return;