如何呈现ajax响应视图

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (39)

这是我的困境:我需要渲染从控制器方法收到的json响应。我这样做是通过调用单击导航栏项“列出文章”来激活方法ajaxIndex()。然后tat方法发出请求路由,然后调用控制器方法也称为ajaxIndex()。然后,该方法会处理所有文章并将其作为回复发送。在那之后,我无法控制的响应,它只是渲染原始的json ... Navbar项目:

<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);
      }
    });         

}

如何将获取的数据渲染到特定视图?现在只需将json响应与html一起呈现。

我的问题是如何呈现响应本身以及控制器方法的响应。当路由被命中时,我尝试使用控制台记录它,但控制台中没有任何内容。什么是实际方法或我需要改变以实现这一目标?

附录: “对于列表文章,您将发送ajax请求到rest api,它返回对象数组(文章)”。我假设我需要发送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响应。看看上面的图片。它不会呈现......

提问于
用户回答回答于

在这种情况下,ajax响应应仅包含您希望通过同步请求获取的实际内容(正文中的html标记)。您的#maine元素应该是div或其他能够具有html子标记的结构。

Ps。:如果你想通过更改标题标签甚至是http内容类型来渲染ajax响应,就像另一个页面一样,那么响应应该加载到iframe标签内。

**编辑:**在实践中,删除ajax返回的视图中body标记之前的上一个内容。并且#maine必须是包含ajax响应的a。

扫码关注云+社区

领取腾讯云代金券