Laravel AJAX GET 并显示新数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46575904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel AJAX GET and show new data
提问by WhoIsMostash
I've been working on a project and thus far I've been able to POST to the database using AJAX, so when the user submits data the page wont refresh but the data is still uploaded to the database.
我一直在做一个项目，到目前为止我已经能够使用 AJAX POST 到数据库，所以当用户提交数据时页面不会刷新但数据仍然上传到数据库。
Now what I want to do, is show those results to the user without needing to refresh the page. I've spent a lot of time trying to figure it out but right now I'm very stuck. Could anyone point me in the right direction? I've read the documentation on the website, watched hours worth of videos but still have no luck.
现在我想做的是向用户显示这些结果而无需刷新页面。我花了很多时间试图弄清楚，但现在我很困惑。有人能指出我正确的方向吗？我已经阅读了网站上的文档，观看了数小时的视频，但仍然没有运气。
The code I have so far.
我到目前为止的代码。
Script
脚本
$.ajax({
type: 'GET', //THIS NEEDS TO BE GET
url: '{{$video->id}}/shownew',
success: function (data) {
console.log(data);
$("#data").append(data);
},
error: function() {
console.log(data);
}
});
Controller
控制器
public function shownew($video)
{
$getstamps = DB::table('timestamps')
->where('videoid', '=', $video)
->orderByRaw('LENGTH(timestamp_time)', 'ASC')
->orderBy('timestamp_time', 'asc')
->get();
return response()->json(array('success' => true, 'getstamps' => $getstamps));
}
Console
安慰
{success: true, getstamps: Array(3)}
getstamps: Array(3)
0: {
timestamp_id: 128,
videoid: "5",
timestamp_name: "Title",
timestamp_time: 1,
created_at: "2017-10-04 23:28:12",
…
}
1: {
timestamp_id: 129,
videoid: "5",
timestamp_name: "1",
timestamp_time: 1,
created_at: "2017-10-04 23:41:01",
…
}
2: {
timestamp_id: 130,
videoid: "5",
timestamp_name: "1",
timestamp_time: 1,
created_at: "2017-10-04 23:41:21",
…
}
length: 3
__proto__: Array(0)
success: true
__proto__: Object
采纳答案by WhoIsMostash
This fixed the issue.
这解决了这个问题。
$.ajax({
type: 'GET', //THIS NEEDS TO BE GET
url: '{{$video->id}}/shownew',
dataType: 'json',
success: function (data) {
console.log(data);
container.html('');
$.each(data, function(index, item) {
container.html(''); //clears container for new data
$.each(data, function(i, item) {
container.append('<div class="row"><div class="ten columns"><div class="editbuttoncont"><button class="btntimestampnameedit" data-seek="' + item.timestamp_time + '">' + new Date(item.timestamp_time * 1000).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0] +' - '+ item.timestamp_name +'</button></div></div> <div class="one columns"><form action="'+ item.timestamp_id +'/deletetimestamp" method="POST">' + '{!! csrf_field() !!}' +'<input type="hidden" name="_method" value="DELETE"><button class="btntimestampdelete"><i aria-hidden="true" class="fa fa-trash buttonicon"></i></button></form></div></div>');
});
container.append('<br>');
});
},error:function(){
console.log(data);
}
});
回答by M Arfan
here is the solution for you problem
这是您问题的解决方案
$.ajax({
type: 'GET', //THIS NEEDS TO BE GET
url: '{{$video->id}}/shownew',
success: function (data) {
var obj = JSON.parse(data);
var your_html = "";
$.each(obj['getstamps'], function (key, val) {
your_html += "<p>My Value :" + val + ") </p>"
});
$("#data").append(you_html); //// For Append
$("#mydiv").html(your_html) //// For replace with previous one
},
error: function() {
console.log(data);
}
});
