NodeJS ejs模板中發(fā)送ajax請(qǐng)求后如何局部刷新數(shù)據(jù)?

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>\
                            序號(hào)\
                        </th>\
                      
                        <th>\
                            姓名\
                        </th>\
                       
                        <th>\
                            狀態(tài)\
                        </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>
                                已通過(guò)
                            </td>
                        <%}
                        
                        %>\
                        <td>\
                            <button onClick="approve(<%=orders[i].id%>)">通過(guò)</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") {
                  //這里如何處理才能局部刷新這條數(shù)據(jù)更新后的狀態(tài)?
                } else {
                    alert("error!")
                }
            },
            error: function(data) {
                alert("網(wǎng)絡(luò)異常");
            }
        });

回答

編輯回答

款爺

之前瞎說(shuō)了一波.....ejs渲染以后不能動(dòng)態(tài)修改，還是要靠ajax...根據(jù)你的代碼改了一下，上代碼，代碼測(cè)過(guò)了沒問(wèn)題，圖我就不放了，你可以自己測(cè)一下。

ejs中：

<div class="portlet-body" id="container">
  <div class="table-scrollable">
    <table class="table table-hover" id="headerTable">
      <thead>
        <tr>
          <th>序號(hào)</th>
          <th>姓名</th>
          <th>狀態(tài)</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>已通過(guò)</td> <% } %>
          <td><button>通過(guò)</button></td>
        <% }) %>
      </tbody>
    </table>
  </div>
  <button id="ajax">ajax請(qǐng)求</button>
</div>

Node.js控制器中:

et orders = [
    {
      id: 1,
      empname: '測(cè)試一',
      status: 1
    }
  ]

  let orders2 = [
    {
      id: 1,
      empname: '測(cè)試一',
      status: 1
    },
    {
      id: 2,
      empname: '測(cè)試二',
      status: 2
    }
  ]

  app.get('/test', (req, res, next) => {
    res.render('test', {
      title: '測(cè)試',
      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>通過(guò)</button></td>'
              } else {
                str += '<td>已通過(guò)</td><td><button>通過(guò)</button></td>'
              }
              tr += '<tr>' + str + '</tr>'
            }
            $('#headerTable tbody').html(tr)
          }
        }
    });
  });

2018年9月7日 00:31