Question

这是我的困境：我需要呈现从控制器方法接收到的json响应。通过调用导航栏项“列表文章”来激活方法ajaxIndex（），可做到这一点。然后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);
      }
    });         

}

如何将获取的数据呈现到特定视图？现在只将json响应与HTML一起呈现。我的问题是如何呈现响应本身以及控制器方法的响应向何处去。我尝试在命中路由时用控制台记录它，但是控制台中什么都没有。什么是实际方法，或者我需要更改以实现这一目标？

附录：“对于列表文章，您将向剩余api发送ajax请求，并在其中返回对象（文章）数组。”我以为我需要发出Ajax请求，将其发送到适当的刀片后，现在应该显示发送的数据了吗？我在弄错什么吗？ ...

编辑1：

现在，当我进入应用程序中的任何页面时，例如：

http://articleapp.test/articles?page=2

它显示json响应：

编辑2：

我还修改了我的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响应，如我先前所述。看上图。它不会呈现...

Answer 1

在这种情况下，ajax响应应仅包含您希望通过异步请求获取的真实内容（正文中的html标签）。您的#maine元素应为div或其他具有html子标记的结构。

Ps .：如果要通过更改标头标记甚至http内容类型来将ajax响应呈现为另一页，则应将响应加载到iframe标记内。

**编辑：**在pratice中，删除ajax返回的视图中body标记之前的先前内容。并且#maine必须是a才能包含ajax响应。

如何呈现对视图的Ajax响应

1 个答案: