ajax - 如何将ajax响应呈现给视图

问题描述

这是我的困境：我需要渲染从控制器方法收到的 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);
      }
    });         

}

如何将获取的数据渲染到特定视图？现在只在 html 旁边呈现 json 响应。我的问题是如何呈现响应本身以及控制器方法的响应在哪里。当路由被击中时，我尝试控制台记录它，但控制台中没有任何内容。什么是实际方法或我需要改变什么来实现这一目标？

附录： “对于列表文章，您将发送 ajax 请求到 rest api，它返回对象（文章）数组”。我假设我需要发出 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 响应。看上面的图片。不会渲染...

标签： ajaxlaravel

ajax - 如何将ajax响应呈现给视图

问题描述

解决方案

推荐阅读