AJAX 请求只发生一次(PHP 表单请求)
AJAX request only happens once (PHP form request)
这是我对主文件.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));
?>
你发现我的代码有问题吗?
使用 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 完成时执行的,不依赖于进行哪个 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;
- 在Flask中使用.getJSON请求时,只运行一次命令
- 优化的方法;标题“;只发送一次POST请求即可访问网站
- http请求,每500ms一次,直到请求完成Angular
- 多久向服务器发送一次Http请求以检查更新?(Ajax)
- 如何在节点中使用承诺一次并行异步多个请求
- 授权标头仅在 AJAX CORS 请求中追加一次
- 为什么将 ng-select 替换为自定义指令会导致$http请求不会每隔一段时间发送一次
- AJAX 请求触发 4 次而不是一次
- AJAX 请求只发生一次(PHP 表单请求)
- 如何删除浏览器在一次请求期间添加的所有 Cookie
- 在每秒 10 次调用限制的情况下一次发出 50 个 API 请求的有效方法是什么(烂番茄 API)
- 使用RxJS限制一次的请求数
- Ajax iframe请求在Internet Explorer中只能工作一次
- 事件发射器发射一次,请求挂起
- 如何获得用户's的位置,而无需请求许可,或者如果用户允许一次,则无需再请求
- 为什么我的页面中的AJAX请求只工作一次
- Jquery Queue请求集成一次First Request Success,然后调用下一个请求
- 如何将数据推送到JSP,而不是每2秒请求一次
- Ajax 2请求一次
- 许多请求一次解析