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)));
    }
    });

});