按照本页的示例进行操作： http://www.formget.com/submit-form-using-ajax-php-and-jquery/我正在将我的一个网站上的表单转换为使用 ajax 进行提交，这样用户可以使用前进和后退按钮，并且它们的信息不会显示在地址栏中。到目前为止，它在具有单个表单的页面上有效。但是一页上面有多个表单。
露营者的表格.php
<form id="retro1457806069">
<input type="hidden" id="class" name="classa" value="retro">
<input type="hidden" id="type" name="type" value="1">
<input type="submit" id="submit" value="Rent This Camper"></form>
<form id="two1457806069">
<input type="hidden" id="class" name="classa" value="classtwo">
<input type="hidden" id="type" name="type" value="1">
<input type="submit" id="submit" value="Rent This Camper"></form>
<form id="three1457806069">
<input type="hidden" id="class" name="classa" value="classthree">
<input type="hidden" id="type" name="type" value="1">
<input type="submit" id="submit" value="Rent This Camper"></form>
这些是我的脚本生成的实际表单代码（所有多余的文本和它们周围的文本都被删除了。
脚本.js：
$(document).ready(function() {
$("#submit").click(function() {
var classa = $("#classa").val();
var type = $("#type").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'class=' + classa + '&type=' + type;
if (classa == '' || type == '') {
alert("Please Fill All Fields");
} else {
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "campersub.php",
data: dataString,
cache: false,
success: function(result) {
window.location.assign("gear.php")
}
});
}
return false;
});
});
露营者.php
<?php
session_start();
$_SESSION["class"]=$_POST["class"];
$_SESSION["type"]=$_POST["type"];
echo "Success.";
?>
问题是，当我单击第一个提交按钮时.php而不是将表单信息添加到 $_SESSION 数组并将浏览器重定向到齿轮，绝对没有任何反应。但是当我单击第二个或第三个提交按钮时，它会将页面重定向到露营者.php例如？classa=classone&type=1。
我修改了一些东西，主要是记住："Id 属性在文档中必须是唯一的"
（甚至，如果代码中没有其他对 id 表单元素的引用，则可以删除 id 属性）所以我重命名了 id，因为它们具有唯一值，然后我获取点击事件以捕获任何输入提交
注意：我已经从包含最后单击的元素的父元素（其形式）访问了其他元素，因为我不确定它是否是您拥有的整个 HTML。
露营者.php
<form id="retro1457806069">
<input type="hidden" id="class1" name="classa" value="retro">
<input type="hidden" id="type1" name="type" value="1">
<input type="submit" id="submit1" value="Rent This Camper"></form>
<form id="two1457806069">
<input type="hidden" id="class2" name="classa" value="classtwo">
<input type="hidden" id="type2" name="type" value="1">
<input type="submit" id="submit2" value="Rent This Camper"></form>
<form id="three1457806069">
<input type="hidden" id="class3" name="classa" value="classthree">
<input type="hidden" id="type3" name="type" value="1">
<input type="submit" id="submit3" value="Rent This Camper"></form>
脚本.js
$(document).ready(function() {
$("input[type=submit]").click(function(e) {
// **Accesing by proximty of the last clicked element, and by its name.
e.preventDefault();
var classa = $(this).parent('form').find('input[name="classa"]').val();
var type = $(this).parent('form').find('input[name="type"]').val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'class=' + classa + '&type=' + type;
if (classa == '' || type == '') {
alert("Please Fill All Fields");
} else {
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "campersub.php",
data: dataString,
cache: false,
success: function(result) {
window.location.assign("gear.php")
}
});
}
return false;
});
});
我认为它必须随着这些变化而运行......