ajax调用后获取旧数据(get方法)Laravel 5.5
问题描述:
我在页面上使用两个ajax调用: 在页面的一侧,我使用ajax post发布数据并在数据库中提交颜色(表名:color_store),另一方面,我尝试从该表中获取所有颜色,并通过单击按钮将其置于选择标记中。 但即使提交新颜色,我仍然会收到旧数据。ajax调用后获取旧数据(get方法)Laravel 5.5
这里是我的颜色提交表单:
<form method="post" action="/CRM/defineColor" id="colorPickingForm">
<input id="colorName" name="colorName" type="text">
<button type="button" class="btn blue" id="addColor">submit</button>
</form>
这里是我的ajax到颜色提交到数据库:
$('#addColor').click(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var colorName = $('#colorName').val();
$.ajax({
url: "/CRM/defineColor",
type:"POST",
data:{ colorName: colorName},
success: function(data) {
$("#result").empty().append(data)
}
})
这里是选择标签和按钮显示数据:
<select class="form-control" id="colorFetch">
</select>
<button type="button" class="btn red" id="colorRefresh">Color Update</button>
这里是AJAX调用获取所有的颜色:
$.ajax({
url: "/CRM/fetchColor",
type:"get",
dataType: "json",
cache: false,
contentType:"application/json; charset=utf-8",
success: function(colorNameReq) {
$("#colorRefresh").click(function(){
//loop through json object
$("#colorFetch").empty();
$.each(colorNameReq, function(key, value) {
$('#colorFetch')
.append($("<option></option>")
.attr({
id:key,
value:value
})
.text(value));
});
});
}
})
这里是我的控制器,得到所有的颜色数据库:
protected function fetchColor(){
$colorInfo = new Color_store;
$colorInfo = $colorInfo->get();
$count = count($colorInfo);
for($i = 0 ; $i < $count; $i++){
$colorName[] = $colorInfo[$i]->colorName ;
}
$colorName=json_encode($colorName);
return $colorName;
}
那么,为什么我收到甚至在将颜色提交到数据库之后,JSON对象的旧值?我真的不明白,是不是ajax想给我新的数据?
例如: 当我加载页面并按下“颜色更新”按钮时,它会显示我以前提交的两种颜色(红色和绿色)。但是当我向数据库提交新颜色时,让我们说黄色。按下“颜色更新”按钮后,它会再次显示红色和绿色,但列表中没有显示黄色。是不是假设在列表中显示新的颜色(红色,绿色和黄色)?
任何帮助,将不胜感激!
答
您的颜色加载AJAX调用似乎不正确。它应该如下:
$("#colorRefresh").click(function(){
$.ajax({
url: "/CRM/fetchColor",
type:"get",
dataType: "json",
cache: false,
contentType:"application/json; charset=utf-8",
success: function(colorNameReq) {
//loop through json object
$("#colorFetch").empty();
$.each(colorNameReq, function(key, value) {
$('#colorFetch')
.append($("<option></option>")
.attr({
id:key,
value:value
})
.text(value));
});
}
});
});
并确保您添加的新颜色是否已成功写入数据库。
此外,您可以使用设置间隔函数来检查给定时间间隔内的颜色更新。这将是这样的:
setInterval(function(){
$.ajax({
url: "/CRM/fetchColor",
type:"get",
dataType: "json",
cache: false,
contentType:"application/json; charset=utf-8",
success: function(colorNameReq) {
//loop through json object
$("#colorFetch").empty();
$.each(colorNameReq, function(key, value) {
$('#colorFetch')
.append($("<option></option>")
.attr({
id:key,
value:value
})
.text(value));
});
}
});
}, 2000); //This would check and update in every 2 seconds.
@Sahand Khodaparast –
您的JavaScript的第二块创建一个Ajax请求(大概在页面加载)。如果你想在点击按钮时发出新的请求,那么ajax调用应该在点击处理程序中完成,而不是像你现在所做的那样。 – Steve
@Steve哦!谢谢你,你其实是对的。 **我还有一个问题**,我怎样才能设置间隔计时器到该Ajax调用,以便每2秒加载颜色表的内容,并且不要一遍又一遍地重复颜色?我想只更新列表。 –