如何将ajax响应呈现给视图
如何将ajax响应呈现给视图
提问于 2019-06-20 02:51:49
这是我的困境:我需要呈现从控制器方法接收到的json响应。我通过单击激活方法ajaxIndex()的导航栏项目"List Articles“来实现这一点。然后，tat方法向路由发出请求，而路由又调用控制器方法，也称为ajaxIndex()。然后，该方法对所有文章进行选通，并将其作为响应发送。在那之后，我不能控制的响应，它只是呈现原始的json ...导航栏项目：
<a class="nav-link" href="/articles" onclick="ajaxIndex(this)"> List Articles </a>路由：
Route::get('/articles', "ArticlesController@ajaxIndex");ArticlesController中的方法
public function ajaxIndex(Request $request)
{
$var1 = $request->var1;
$var2 = $request->var2;
$elem = $request->elem;
$currUser = auth()->user();
$currUri = Route::getFacadeRoot()->current()->uri();
$articles = Article::orderBy("created_at","desc")->paginate(5);
$html = view('articles.List Articles')->with(compact("articles", "var1", "var2", "elem", "currUser", "currUri"))->render();
//return $request;
return response()->json(["success"=> true, "html" => $html], 200);
//return response()->json(["success"=> $articles,"var1"=> $var1, "var2"=> $var2, "elem"=> $elem, "currUser" => $currUser, "currUri" => $currUri], 200);
}下面是我的ajax方法
function ajaxIndex(me,formId){
let var1 = "gg";
let var2 = "bruh";
let token = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let url = "/articles";
if(formId){
let form = $("#"+formId).serialize();
console.log(form);
}
$.ajax({
type: "GET",
url: url,
headers:{
"X-CSRF-TOKEN": token
},
data: {/*
var1: var1,
var2: var2,
elem: {
id: me.id ? me.id : null,
class: me.className ? me.className : null,
value: me.value ? me.value : null,
innerHTML: me.innerHTML ? me.innerHTML : null,
}
*/},
success: (data) => {
console.log(data);
$('#maine').html(JSON.parse(data.html));
},
error: (data) => {
console.log(data);
}
});
}如何将采集到的数据渲染到特定视图？现在只需在html旁边呈现json响应。
我的问题是如何呈现响应本身，以及控制器方法的响应去向。当路由命中时，我尝试在控制台上记录，但控制台中什么也没有。什么是实际的方法，或者我需要改变什么才能实现这一点？
ajax附录：“对于列表文章，您将向rest api发送ajax请求，在那里它将返回对象(文章)数组”。我假设我需要发出ajax请求，在被发送到适当的刀片后，我现在应该显示发送的数据吗？我是不是搞错了什么？
Edit1:
现在，当我转到应用程序中的任何页面时，例如：
http://articleapp.test/articles?page=2它显示了json响应：
Edit2:
我还修改了ajax方法，以正确显示文章列表的当前页面。尝试转到下一页时出现问题。代码如下：
function ajaxIndex(me,formId){
let token = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let url = "/articles";
if(formId){
let form = $("#"+formId).serialize();
console.log(form);
}
$.ajax({
type: "GET",
url: url,
headers:{
"X-CSRF-TOKEN": token
},
data: {},
success: (data) => {
console.log(data);
let html = "<div class='container'>";
let articleBody = "";
let pagination = "<ul class='pagination'><li class='page-item'><a class='page-link' href='#'>Previous</a></li>";
if(data.articles.data.length > 0){
for(let i=0;i<data.articles.current_page;i++){
let created_at = data.articles.data[i].created_at.replace(/-/g,"/").split(" ")[0];
html += "<div class='row' style='background-color: whitesmoke;'><div class='col-md-4 col-sm-4'><a href='/articles/"+data.articles.data[i].id+"'><img class='postCover postCoverIndex' src='/storage/images/"+data.articles.data[i].image+"'></a></div><div class='col-md-8 col-sm-8'><br>";
if(data.articles.data[i].body.length > 400){
articleBody = data.articles.data[i].body.substring(0, 400);
html += "<p>"+articleBody+"<a href='/articles/"+data.articles.data[i].id+"'>...Read more</a></p>";
}
else{
html += "<p>"+data.articles.data[i].body+"</p>";
}
html += "<small class='timestamp'>Written on "+created_at+" by "+data.articles.data[i].user.name+"</small></div></div><hr class='hrStyle'></hr>";
history.pushState(null, null, "/articles?page="+(i+1));
}
for(let i=0;i<data.articles.total;i++){
//console.log(data.articles.data[i].id);
pagination += "<li class='page-item'><a class='page-link' href='/articles?page="+(i+1)+"'>"+(i+1)+"</a></li>";
}
pagination += "<li class='page-item'><a class='page-link' href='#'>Next</a></li></ul>";
}
html+="<div class='d-flex' style='margin: 10px 0px;padding-top: 20px;'><div class='mx-auto' style='line-height: 10px;'>"+pagination+"</div></div></div>";
$('#maine').html(html);
//?page=2
},
error: (data) => {
console.log(data);
}
});
}当我转到下一页时，它显示了我前面所说的json响应。请看上图。它不会渲染...
回答 1
Stack Overflow用户
发布于 2019-06-20 04:24:30
在这种情况下，ajax响应应该只包含您希望通过异步请求获得的实际内容(正文中的html标记)。您的#maine元素应该是一个div或其他能够拥有html子标签的结构。
附注:如果你想通过改变头标签，甚至是http内容类型来呈现ajax响应，就像另一个页面一样，那么响应应该被加载到iframe标签中。
**编辑：**在实际操作中，删除ajax返回的view中body标签之前的内容。和#maine必须是a才能包含ajax响应。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56674139
复制相关文章
相似问题