gpt4 book ai didi

php - jQuery AJAX 多次提交到 PHP 脚本

转载 作者:行者123 更新时间:2023-12-01 05:04:05 26 4
gpt4 key购买 nike

我正在尝试在不重新加载页面的情况下提交表单。第一次可以正常工作,但是当我尝试第二次提交时,页面会刷新。

我希望能够将新数据传播到当前元素中进行多次提交。我缺少什么。

这是我的第一页 form.php

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery("#form").validate({
debug: false,
submitHandler: function (form) {
jQuery.post('formPost.php',
jQuery("#form").serialize(), function (data) {
jQuery('#Box').html(data);
});
}
});
});
// ]]>
</script>

</head>
<body>
<div id="Box">
<form id="form" name="form" method="POST" action="">
<select name="color">
<option>red</option>
<option>white</option>
<option>blue</option>
</select>
<input type="submit" name="submit" value="submit" /><br />
</form>
</div>
</body>
</html>

这是我的第二页 formPost.php

<?php

switch ($_POST['color'])
{
case 'red':
echo 'you chose red<br /><br />';
break;

case 'blue':
echo 'you chose blue<br /><br />';
break;

case 'white':
echo 'you chose white<br /><br />';
break;
}
?>
<form id="form" name="form" method="POST" action="">
<select name="color">
<option>red</option>
<option>white</option>
<option>blue</option>
</select>
<input type="submit" name="submit" value="submit" /><br />
</form>

我希望能够在多个表单提交中重复使用同一表单,同时保持在同一页面上,并使数据显示在同一 div 中,而无需刷新页面。有什么想法

最佳答案

试试这个:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
initializeForm();
});

function initializeForm() {
jQuery("#form").validate({
debug: false,
submitHandler: function (form) {
jQuery.post('formPost.php',
jQuery("#form").serialize(), function (data) {
jQuery('#Box').html(data);
initializeForm();
});
}

});
}

// ]]>
</script>

</head>
<body>
<div id="Box">
<form id="form" name="form" method="POST" action="">
<select name="color">
<option>red</option>
<option>white</option>
<option>blue</option>
</select>
<input type="submit" name="submit" value="submit" /><br />
</form>
</div>
</body>
</html>

我对此进行了测试,它对我来说在本地有效。我希望这有帮助!

关于php - jQuery AJAX 多次提交到 PHP 脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7382995/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com