AJAX表單刷新頁面

Question

已經搜索了一段時間，找不到適合該問題的正確答案。 我有一個“財務”跟蹤器，該跟蹤器具有幾個隱藏的div，當單擊該按鈕以顯示div時，將使用jQuery出現。 我有一個資產跟蹤器，該查詢器查詢數據庫，並在選中該復選框時，使用相鄰輸入行中的新值更新數據庫。 我正在嘗試使復選框提交數據，而不會導致頁面重新加載，並且div再次“切換”。

在表單部分，我嘗試刪除method='post'但是當選中此框時，它重新加載了頁面並將所有post變量添加到URL字符串中。 為了防止重新加載，我刪除了action='FBook.php' ，但這並不能解決問題。

這是PHP文件中的相關代碼：

if(isset($_POST['AssetSetUpdate'])) { $AssetLastUpdate = $dtNowDate->format('Y-m-d');
foreach($_POST['AssetID'] as $key => $id) { if(isset($_POST['AssetSetUpdate'][$key])) {
$stmt_ATrackUp -> bindParam(':UpDate', $AssetLastUpdate, PDO::PARAM_STR, 10);
$stmt_ATrackUp -> bindParam(':UpNotes', $_POST['AssetNotes'][$key], PDO::PARAM_STR, 50);
$stmt_ATrackUp -> bindParam(':UpThis', $_POST['AssetDescription'][$key], PDO::PARAM_STR, 50);
$stmt_ATrackUp -> bindParam(':UpVal', $_POST['AssetValue'][$key], PDO::PARAM_INT, 3);
$stmt_ATrackUp -> execute(); } else continue; }
echo "<div class='Notice'>" . $PageTitle . " / Assets updated!</div>"; }

（其他代碼）

$(document).ready(function() {

$("#AssetUpdateForm").submit(function(e) {
e.preventDefault();
$.ajax({
    type: 'POST',
     url: 'FBook.php',
    data: $(this).serialize(),
     success: function() { alert('form submitted'); },
    });
return false;
});


$('#ShFBAsset').click(function() { $('#FBAsset').toggle('slow'); });

（其他代碼）

});

（其他代碼）

$AssetCounter = 1;

$stmt_ATrack -> execute(); while ($row_ATrack = $stmt_ATrack -> fetch(PDO::FETCH_ASSOC))

{   

$ChAge = $row_ATrack['Checked']; $cChAge = ''; switch(true)
{
case (strtotime($ChAge) >= strtotime('-7 days')): $cChAge = 'FBCAN'; break;
case (strtotime($ChAge) >= strtotime('-30 days')): $cChAge = 'FBCA1'; break;
case (strtotime($ChAge) >= strtotime('-90 days')): $cChAge = 'FBCA3'; break;
default: $cChAge = 'FBCA6'; break;
}

if(isset($row_ATrack['Serial'])) { $IfDSerial = "<strong>Serial: </strong>" . $row_ATrack['Serial'] . "<br/>"; } else { $IfDSerial = ''; }
if(isset($row_ATrack['UPC'])) { $IfDUPC = "<strong>UPC: </strong>" . $row_ATrack['UPC'] . "<br/>"; } else { $IfDUPC = ''; }
if(isset($row_ATrack['Related'])) { $IfDRelated = "<strong>Related: </strong>" . $row_ATrack['Related'] . "<br/>"; } else { $IfDRelated = ''; }
if(isset($row_ATrack['Location'])) { $IfDLocation = "<strong>Location: </strong>" . $row_ATrack['Location'] . "<br/>"; } else { $IfDLocation = ''; }
if(isset($row_ATrack['TagPhoto'])) { $IfDTagPhoto = "<strong>Tag photo: </strong><a href='Images/INV/" . $row_ATrack['TagPhoto'] . ".JPG'>" . $row_ATrack['TagPhoto'] . "</a><br/>"; } else { $IfDTagPhoto = ''; }

$IfDetails = "<div class='UPop'><img class='th_icon' src='Images/Icons/ic_lst.jpeg'><div class='UPopO'>" . ($IfDSerial) . ($IfDUPC) . ($IfDRelated) . ($IfDLocation) . ($IfDTagPhoto) . "</div></div>";
if($IfDetails == "<div class='UPop'><img class='th_icon' src='Images/Icons/ic_lst.jpeg'><div class='UPopO'></div></div>") { $IfDetails = ''; }

echo "<form id='AssetUpdateForm[" . $AssetCounter . "]' method='post'>";
echo "<tr><input type='hidden' name='AssetID[" . $AssetCounter . "]' value='" . $AssetCounter . "' />";
echo "<td><input type='hidden' name='AssetDescription[" . $AssetCounter . "]' value='" . $row_ATrack['Description'] . "' /><a href='https://www.google.com/#q=eBay+" . $row_ATrack['Description'] . "' target='_new_AssetSearch'>" . $row_ATrack['Description'] . "</a></td>";
echo "<td>" . $row_ATrack['Type'] . " - " . $row_ATrack['Category'] . "</td>";
echo "<td><input type='checkbox' name='AssetSetUpdate[" . $AssetCounter . "]' value='Now' onchange='this.form.submit();' /></td>";
echo "<td><input type='number' name='AssetValue[" . $AssetCounter . "]' value = '" . $row_ATrack['Value'] . "' style='width: 75px;' /></td>";
echo "<td class='" . $cChAge . "'>" . $ChAge . "</td>";
echo "<td><input type='text' name='AssetNotes[" . $AssetCounter . "]' value = '" . $row_ATrack['Notes'] . "' style='width: 140px;' /></td>";
echo "<td>" . $IfDetails . "</td>";
echo "</tr>";
echo "</form>";

$AssetCounter++;

}

Answer 1

您的JavaScript：

$("#AssetUpdateForm")

…正在使用id="AssetUpdateForm"的表單。

您的PHP說：

id='AssetUpdateForm[" . $AssetCounter . "]'

用HTML術語表示為：

id='AssetUpdateForm[something]'

即使變量為空，您仍然可以使用方括號，因此ID將不匹配，並且JavaScript事件處理程序將永遠不會綁定到該元素。

您需要使用真實ID，或者因為它似乎可以更改，所以需要在表單中添加一個class並在JavaScript中使用.class-selector 。

---

注意：您的HTML無效。 您所描述的特定問題有可能導致相同的症狀，因此僅解決上述問題可能還不夠。 使用驗證器並編寫有效的HTML。

Answer 2

與HTML或PHP無關。 事實證明jQuery AJAX與onclick='this.form.submit();'沖突onclick='this.form.submit();' 屬性。 我刪除了它，並將ajax請求更改為以下內容-盡管它仍然存在錯誤，因為它無法在第二個ajax請求上正常工作，但它可以驗證其他一切都很好。

$(".Check2Update").on('change', function(e) {
e.preventDefault();
$.ajax({
    type: 'post',
    url: 'FBook.php',
    data: $(this.form).serialize(),
    success: function(html) { 
        console.log('Successfully submitted AJAX!');
        $("#TableAssets").replaceWith($('#TableAssets', $(html)));
    }
    });

});