如何将 post Ajax 数据发送到您的服务器以更新 SharePoint 列表数据

Question

我已经在这个 DataTable 上工作了一段时间，除了最后一件事之外，我拥有我需要的所有功能。现在，我的 table 从 AJAX“GET”请求中读取 SharePoint 列表数据，并填充它并根据 parent/child 行对其进行组织。

我需要我的 DataTable 执行的最后一个功能是创建一个按钮，允许您将新行添加到 table，然后它将根据以下内容自动将其分类到正确的子行中“计划和可交付成果”类别。之后，我想让 DataTable 将数据发送到相应的 SharePoint 列表，这可以通过 AJAX "POST" 请求来完成吗？

我怎样才能实现这个目标？我现在完全迷失了。

这是我的代码：

function loadData() { //Initializing the AJAX Request function to load in the external list data from different subsites
    //create an array of urls to run through the ajax request instead of having to do multiple AJAX Requests
    var urls = ["url1","url2","url3","url4","url5","url6","url7","url8"];
       
    for (i=0; i < urls.length; i++) { //for loop to run through the AJAX until all URLs have been reached
      $.ajax({
        url: urls[i],
        'headers': { 'Accept': 'application/json;odata=nometadata' },
        success: function (data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
          data = data;
          var table = $('#myTable').DataTable();
          table.rows.add( data.value ).draw();
        }
      }); 
    }
}

$(document).ready(function() {
    var collapsedGroups = {}; 
    var top = '';
    var parent = '';
    
  var table = $('#myTable').DataTable( {
    "columns": [
      { "data": "Program", visible: false },
      { "data": "Deliverable", visible: false },
      { "data": "To" },
      { "data": "Date" },
      { "data": "Approved" },
      { "data": "Notes" }
    ],
    
    dom: "<'row'<'col-sm-12 col-md-10'f><'col-sm-12 col-md-2'B>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
     buttons: [{
      extend: 'collection',
      className: "btn-dark",
      text: 'Export',
      buttons:
      [{
      extend: "excel", className: "btn-dark"
    },
      {
      extend: "pdf", className: "btn-dark"
    },
       {
      extend: "print", className: "btn-dark"   
    },
      ],
    }],
    order: [[0, 'asc'], [1, 'asc'] ],   
    rowGroup: {
            dataSrc: [
            'Program',
            'Deliverable'
            ],
            startRender: function (rows,group,level){
                var all;
                if (level === 0) {
                    top = group;
                    all = group;
                } else if (level === 1) {
                    parent = top + group; 
                    all = parent; 
                    // if parent collapsed, nothing to do
                    if (!collapsedGroups[top]) {
                        return;
                    }                   
                } else {
                    // if parent collapsed, nothing to do
                    if (!collapsedGroups[parent]) {
                        return;
                    } 
                    all = top + parent + group;
                }

                var collapsed = !collapsedGroups[all];
                console.log('collapsed:', collapsed);
              
              rows.nodes().each(function(r) {
                r.style.display = collapsed ? 'none' : '';
              });
              //Add category name to the <tr>.
              return $('<tr/>')
                .append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
                .attr('data-name', all)
                .toggleClass('collapsed', collapsed);
                
            
            }
            
        }
  } );
    
 loadData();

 $('#myTable tbody').on('click', 'tr.dtrg-start', function () {
        var name = $(this).data('name');
        collapsedGroups[name] = !collapsedGroups[name];
        table.draw(false);
    }); 
var table = $('#example').DataTable( {

var urls = ["url1","url2","url3","url4","url5",...];
  
for (i=0; i < urls.length; i++) {     
  ajax: {
    url: urls[i],
    method: "POST",
    data: function( ) {
      return dataToSend;
    }
  },
  }
} );
    
} );
} );

.btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}
div.container {
    min-width: 980px;
    margin: 0 auto;
}
.header {
  padding: 10px;
  text-align: center;
}
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
div.dt-button-collection {
    position: static;
}

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel ="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.bootstrap4.min.css"/>
<link rel ="stylsheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"/>
<link rel ="stylesheet" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.bootstrap4.min.css"/>
  <h1><strong>Deliverables</strong></h1>
  <p><strong>Click the Program/Deliverable names to Collapse/Expand the rows</strong></p>
</div>
<div class ="container">
<table id="myTable" class="table table-bordered" cellspacing="0" width="100%">
  <thead class="thead-dark">
    <tr>
      <th>Program</th>
      <th>Deliverable</th>
      <th>To</th>
      <th>Date</th>
      <th>Approved</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tfoot class="thead-dark">
  <tr>
      <th>Program</th>
      <th>Deliverable</th>
      <th>To</th>
      <th>Date</th>
      <th>Approved</th>
      <th>Notes</th>
    </tr>
  </tfoot>
</table>
</div>

我相信这应该是将数据从 DataTable 发送到 SharePoint 列表的正确函数，但它目前没有用，因为我不知道如何向数据添加新的 rows/datatable.

function sendData() {
    var urls = ["url1","url2","url3","url4","url5","url6","url7","url8"];
        
    var data1 = {
           Program: 'Please provide the Program name here',
           Deliverable: 'Please provide the type of deliverable here',
           To: 'Please provide the recipients email here',
           Date: 'Please provide the submission date here',
           Approved: 'Please provide where or not the deliverable has been approved here',
           Notes: Please provide notes about the deliverable here'
    };
     $.ajax({
        for (i=0; i < urls.length; i++) {
        $.ajax({
                   url: urls[i],
                   method: "POST",
                                 data: JSON.stringify(data),
                   headers: { "Accept": "application/json; odata=verbose",
                                   "X-RequestDigest": $("#__REQUESTDIGEST").val()                                 
                   },
                   success: function (data) {
                              alert('Item added successfully');
                  },
                  error: function (error) {
                      alert("Error: "+ JSON.stringify(error));
                 }
          });
        }
    });
}

Answer 1

您可以使用标准 jQuery ajax data 选项从 DataTales ajax 请求中 post 数据到服务器 - 但稍作修改以符合 DataTables 使用的方式它。

用于将动态构建的数据发送到服务器的 DataTables 语法是 documented here。方法是这样的：

ajax: {
  type: "POST", // or "GET"
  url: "http://whatever.com/endpoint",
  data: function () {
    return dataToSend; // dataToSend is just my JS variable
  }
}

注意这里的data选项是一个函数，其中returns要发送到服务器的数据。

变量 dataToSend 的数据可以通过多种方式准备，具体取决于您的具体需要和上下文。

例如，它可以是一个标准的内容 HTML <form> - 所有表单输入字段的值。在这种情况下，您可能希望将表单的数据转换为 JSON（例如，使用 jQuery 的 $.serialize() 函数或 $.serializeArray() 函数。

如果您的 JavaScript 代码中已经有一个 JSON 对象，您可以通过设置 ajax contentType 并字符串化您的 JSON 来发送它- 像这样：

ajax: {
  type: "POST", // or "GET"
  url: "http://whatever.com/endpoint",
  data: function () {
    contentType: "application/json",
    return JSON.stringify(dataToSend);
  }
}

（否则默认内容类型为 application/x-www-form-urlencoded。）

这是一个示例，我们在同一页面中有一个简单的表单作为数据表：

<form id ="formOne">
    <input id="fieldOne" type="text" name="fieldOne"></input>
    <input id="fieldTwo" type="text" name="fieldTwo"></input>
    <input type="submit" value="Submit">
</form>

表单有两个输入字段和一个提交按钮。

DataTableajax部分如下：

var table = $('#example').DataTable( {
  ajax: {
    url: "http://whatever.com/endpoint",
    method: "POST",
    data: function( ) {
      return dataToSend;
    }
  },
  // other items not shown
} );

页面加载时，table 照常显示。

如果用户填写表单并点击提交按钮，此操作将被以下代码拦截：

var dataToSend;

$( "#formOne" ).on( "submit", function( event ) {
  event.preventDefault(); // stops the standard form submission from happening
  dataToSend = $( "#formOne" ).serializeArray();
  console.log( dataToSend );
  table.ajax.reload(); // calls the DataTables ajax request again
});

当然，由服务器处理此请求中的结果数据。因为我的示例是 POST 请求，所以这将涉及访问表单参数数据的 server-side 代码。如何执行此操作取决于您使用的 server-side 框架。

如何将 post Ajax 数据发送到您的服务器以更新 SharePoint 列表数据

How to post Ajax Data to your server to update SharePoint list data

javascript

ajax

sharepoint

jquery

datatables