NodeJS ejs模板中发送ajax请求后如何局部刷新数据?

Question

1.server端：

 ClientController.prototype.ordertoapp = function(req, res, next) 
    {
  

    var locals = {
        cas_user: casuser,
        title: 'order',
        page_title: '待审批'
    };

    OrderDao.query(function(err, result) {
        
        locals.orders = result;
        res.render('client/order', locals)
    })
}

2.client

 <div class="portlet-body" id="container">

JS:

   var $orders = $('<div class="table-scrollable">\
                <table class="table table-hover" id="headerTable">\
                    <thead>\
                    <tr>\
                        <th>\
                            序号\
                        </th>\
                      
                        <th>\
                            姓名\
                        </th>\
                       
                        <th>\
                            状态\
                        </th>\
                        <th>\
                        </th>\
                    </tr>\
                    </thead>\
                    <tbody>\
                    <% for(var i=0;i<orders.length;i++){  %>\
                    <tr>\
                        <td>\
                            <%=orders[i].id%>\
                        </td>\
                      
                        <td>\
                            <%=orders[i].empname%>\
                        </td>\
                       
                      
                        <%if(orders[i].status ==1){%>\
                            <td>\
                                已提交\
                            </td>\
                        <%}
                        if(orders[i].status ==2){%>  
                            <td>
                                已通过
                            </td>
                        <%}
                        
                        %>\
                        <td>\
                            <button onClick="approve(<%=orders[i].id%>)">通过</button> \                
                        </td>\
                    </tr>\<%}%>\
                    </tbody>\
                </table>\
            </div>');

    $('#container').html($orders);
    
   Ajax:
   
    $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '../rest/updateorder',
            data: mydata1,
            headers: {
                'Content-Type': 'application/json'
            },
            success: function(res) {    
                console.log(res);              
                if (res.status == "ok") {
                  //这里如何处理才能局部刷新这条数据更新后的状态?
                } else {
                    alert("error!")
                }
            },
            error: function(data) {
                alert("网络异常");
            }
        });

Answer 1

之前瞎说了一波.....ejs渲染以后不能动态修改，还是要靠ajax...根据你的代码改了一下，上代码，代码测过了没问题，图我就不放了，你可以自己测一下。

ejs中：

<div class="portlet-body" id="container">
  <div class="table-scrollable">
    <table class="table table-hover" id="headerTable">
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <% orders.forEach(function (order) { %>
          <td><%= order.id %></td>
          <td><%= order.empname %></td>
          <% if(order.status ==1) { %> <td>已提交</td> <% } else { %> <td>已通过</td> <% } %>
          <td><button>通过</button></td>
        <% }) %>
      </tbody>
    </table>
  </div>
  <button id="ajax">ajax请求</button>
</div>

Node.js控制器中:

et orders = [
    {
      id: 1,
      empname: '测试一',
      status: 1
    }
  ]

  let orders2 = [
    {
      id: 1,
      empname: '测试一',
      status: 1
    },
    {
      id: 2,
      empname: '测试二',
      status: 2
    }
  ]

  app.get('/test', (req, res, next) => {
    res.render('test', {
      title: '测试',
      orders
    })
  })

  app.get('/test/get', (req, res, next) => {
    res.send({
      status: 1,
      orders: orders2
    })
  })

Ajax：

$('#ajax').click(function () {
    $.ajax({
        type: 'GET',
        url: 'test/get',
        success: function(res) {    
          if (res.status === 1) {
            var str = '', tr = '', orders = res.orders;
            for (var i = 0; i < orders.length ; i ++) {
              str = '<td>' + orders[i].id + '</td>' + '<td>' + orders[i].empname + '</td>'
              if (orders[i].status === 1) {
                str += '<td>已提交</td><td><button>通过</button></td>'
              } else {
                str += '<td>已通过</td><td><button>通过</button></td>'
              }
              tr += '<tr>' + str + '</tr>'
            }
            $('#headerTable tbody').html(tr)
          }
        }
    });
  });