SailsJs - 用新数据刷新视图

Question

这是我的第一个 Node 应用程序，我正在尝试根据用户应用的过滤器刷新视图。我有一个视图在表格中显示数据如下

上面的代码是

async function getAll(req, res){
  try {
    if (req.session.loginError == true) {
      return res.redirect('/');
    }

    //** logic to fetch data in sData[]

    return res.view('pages/list', {data:sData});
  }
  catch(error){
    sails.log.error('Controller#getAll :: error :', error);
    return res.badRequest('Cannot fetch data at this time.' + error.stack);

  }
}

以上工作正常。问题是如果我们选择一些日期过滤器，例如 fromDate 和 toDate，后端的数据会被正确获取，但视图不会刷新。 我在 ejs 页面中添加了以下代码以将过滤器发送到控制器：

function search()
{
    var searchData = {
        fromDate : document.querySelector('#fromDate').value,
        toDate : document.querySelector('#toDate').value,
        status : document.querySelector('#status').value
    };

    var xmlhttp=new XMLHttpRequest();
    url = "/admin/controller/filterData";
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
    xmlhttp.send(JSON.stringify(searchData))

} 

在控制器中创建了一个名为 filterData 的新方法，如下所示

async function filterData(req, res) {    
try {
        if (req.session.loginError == true) {
          return res.redirect('/');
        }

        var sDate = Date.parse(req.param('fromDate'));
        var eDate = Date.parse(req.param('toDate'));
        var sta = req.param('status')
        var data= await ****.find().where({ and: [{ start_date: { '>': sDate, '<': eDate } }, { status: sta }] }).populate("***").sort('createdAt DESC');
        let sData = [];

        _.forEach(d, function(data){

         //logic to format data

          sData.push(d);
        });


        return res.view('pages/list', {data:sData});
      }
      catch (error) {
        sails.log.error('Controller#getfilterData :: error : ', error);
        return res.redirect('/admin/***/getAll');
      }
}

sData[] 获取过滤记录，但页面未使用新数据刷新。我不确定我们是否可以像这样刷新视图，或者需要将过滤后的数据发送回视图中的功能，然后必须从那里刷新表。请指教。

Answer 1

您正在发送XMLHttpRequest，这是一个ajax 呼叫。所以页面根本不会重新加载。最好从服务器为 /admin/controller/filterData 请求返回一个 json 响应，然后使用 ajax 响应填充 UI。