时间戳

首页 > 解决方案 > HTML 表单不通过 AJAX Post 发送数据

javascript - HTML 表单不通过 AJAX Post 发送数据

问题描述

我有一个 DataTable，它使用 AJAX 从 8 个不同的 SharePoint 列表中提取，并根据那里的 Program 属性组织它们，然后子行由 Deliverable 属性组织，然后是孙行，这是关于“Deliverable”的剩余信息。这方面的一切都非常适合我的 DataTable。

但是，我需要能够将信息写回此 DataTable，因此我认为最简单的方法是使用 HTML 表单读取输入，然后根据其“程序”属性将其发布到相应的 SharePoint 列表。我在 DataTable 下构建了表单，但我不知道如何将其发送到 SharePoint 列表。我目前只使用一个程序来查看它是否有效并且我不成功。我试图 console.log() 一些东西，但什么也没出现。

这是我的表格和表格的图片。 在此处输入图像描述

这是我的代码：

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 = [baseUrl + "_api/web/lists/getbytitle('AMMO Deliverables')/items?$select=Program,Deliverable,To,Date,Approved,Notes", 
    "baseUrl + "_api/web/lists/getbytitle('Dar-Q Deliverables')/items?$select=Program,Deliverable,To,Date,Approved,Notes", 
    "baseUrl + "_api/web/lists/getbytitle('WTBn Deliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable",
    "baseUrl + "_api/web/lists/getbytitle('ODMultiDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable",
    "baseUrl + "_api/web/lists/getbytitle('OEDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable",
    "baseUrl + "_api/web/lists/getbytitle('DocDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable",
    "baseUrl + "_api/web/lists/getbytitle('AHRDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable",
    "baseUrl + "_api/web/lists/getbytitle('SRCDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"];
    
    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( {
  "pageLength": 100,
    "columns": [
      { "data": null, "defaultContent": "" },
      { "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 or Update Table',
      buttons:
      [{
      extend: "excel", className: "btn-dark"
    },
      {
      extend: "pdf", className: "btn-dark"
    },
       {
      extend: "print", className: "btn-dark"   
    },
    {
    text: 'Update Table',
    action: function (e, dt, node, config){
        $('#myModal').modal('show');
        }
    },
      ],
    }],
    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);
    });   

    
} );
 $(document).ready(function() {
    $("#btn").click(function(e){
        var jsonData = {};
        
    var formData = $("#myform").serializeArray();
    // console.log(formData);
    
    $.each(formData, function() {
            if (jsonData[this.name]) {
            if (!jsonData[this.name].push) {
                jsonData[this.name] = [jsonData[this.name]];
            }
            jsonData[this.name].push(this.value || '');
        } else {
            jsonData[this.name] = this.value || '';
        }
            
        
    });
    console.log(jsonData);
        $.ajax({  
                async: true, // Async by default is set to “true” load the script asynchronously  
                // URL to post data into sharepoint list  or your own url
                 url: baseUrl + "_api/web/lists/getbytitle('AMMO Deliverables')/items?$select=Program,Deliverable,To,Date,Approved,Notes",
                method: "POST", //Specifies the operation to create the list item  
                data: JSON.stringify({  
                    '__metadata': {  
                        'type': 'SP.Data.AMMO_x0020_DeliverablesListItem' // it defines the ListEnitityTypeName  
                    },  
                //Pass the parameters
                    'Program': $("#dProgram").val(),  
                    'Deliverable':$("#dDeliverable").val(),  
                    'To': $("#dTo").val(),  
                    'Date': $("#dDate").val(),  
                    'Approved': $("#dApproved").val(),  
                    'Notes': $("#dNotes").val()            
                }),  
                headers: {  
                    "accept": "application/json;odata=verbose", //It defines the Data format   
                    "content-type": "application/json;odata=verbose", //It defines the content type as JSON  
                    "X-RequestDigest": $("#__REQUESTDIGEST").val() //It gets the digest value   
                },  
                success: function(data) {  
                    swal("Item created successfully", "success"); // Used sweet alert for success message  
                },  
                error: function(error) {  
                    console.log(JSON.stringify(error));  
        
                }  
        
            })  
        });
    });
#myform {
    margin:0 auto;
    width:250px;
    padding:14px;
    align: center;
}
h1{
text-align: center;
}
label {
    width: 10em;
    float: left;
    margin-right: 0.5em;
    display: block;
    vertical-align: middle;
}
.submit {
    float:right;
}

fieldset {
    background:#EBF4FB none repeat scroll 0 0;
    border:2px solid #B7DDF2;
    width: 450px;
}

legend {
    color: #fff;
    background: #80D3E2;
    border: 1px solid #781351;
    padding: 2px 6px
    text-align: center;
}
.elements {
    padding:10px;
}
p {
    border-bottom:1px solid #B7DDF2;
    color:#666666;
    font-size:12px;
    margin-bottom:20px;
    padding-bottom:10px;
}
span {
    color:#666666;
    font-size:12px;
    margin-bottom:1px;
    
}
.btn{
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  border: 1px solid #B7DDF2;
  
}
.modal-dialog-centered {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  min-height:calc(100% - (.5rem * 2));
}
.btn:hover{
  color: #333333;
  background-color: #e6e6e6;
}

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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.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"/>
  <div class ="heading">
  <h1 class="center"><strong>Deliverables</strong></h1>
  </div>
<div class ="container">
<table id="myTable" class="table table-bordered" cellspacing="0" width="100%">
  <thead class="thead-dark">
    <tr>
      <th></th>
      <th>Program</th>
      <th>Deliverable</th>
      <th>To</th>
      <th>Date</th>
      <th>Approved</th>
      <th>Notes</th>
    </tr>
  </thead>
</table>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Update DataTable</h4>
      </div>
      <div class="modal-body">
        
          
      <form id="myform" type="post">
  <fieldset>
    <legend align="center">Update Datatable</legend>
    <p>Please fill out the shown fields to add data to the DataTable</p>
    <div class="elements">
      <label for="program">Program :</label>
       <select name = "program" id = "dProgram">
            <option value = "AHR">AHR</option>
            <option value = "AMMO">AMMO</option>
            <option value = "DAR-Q">DAR-Q</option>
            <option value = "Doctrine Development">Doctrine Development</option>
            <option value = "Operational Energy">Operational Energy</option>
            <option value = "Ordnance Multimedia">Ordnance Multimedia</option>
            <option value = "SRC Handbook">SRC Handbook</option>
            <option value = "WTBn">WTBn</option>
         </select>
    </div>
     <div class="elements">
      <label for="Deliverable">Deliverable :</label>
      <select name="Deliverable" id="dDeliverable">
              <option value = "Meeting Minutes">Meeting Minutes</option>
            <option value = "Monthly Status Report (MSR)">Monthly Status Report (MSR)</option>
            </select>
    </div>  
    <div class="elements">
      <label for="To"> To:</label>
      <input type="text" align= "center" id="dTo" name="to" placeholder="example@example.com">
    </div>      
    <div class="elements">
    <label for="Date">Date: </label>
      <input type="date" align= "center" id="dDate" name="date" placeholder="MM/DD/YYYY"> 
</div>  
    <div class="elements">
      <label for="Approved">Approved :</label>
      <select name="Approved" id="dApproved">
              <option value = "Yes">Yes</option>
        <option value = "No">No</option></select>
</div>
      
      <div class="elements">
      <label for="Notes"> Notes :</label>
      <input type="text" align= "left" id="dNotes" name="notes" placeholder="Please provide notes">
   </div>
    
      <div class="submit">
       <input type="submit" id="btn-submit" name="btn-submit" class="btn-submit" value="Submit" />
    </div>
  </fieldset>
</form>    
          
          
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

标签： javascripthtmljqueryajaxdatatables

解决方案

var baseUrl = "http://WebAppURL"
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 = [baseUrl + "_api/web/lists/getbytitle('AMMO Deliverables')/items?$select=Program,Deliverable,To,Date,Approved,Notes", 
    baseUrl + "_api/web/lists/getbytitle('Dar-Q Deliverables')/items?$select=Program,Deliverable,To,Date,Approved,Notes", 
    baseUrl + "_api/web/lists/getbytitle('WTBn Deliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable",
    baseUrl + "_api/web/lists/getbytitle('ODMultiDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable",
    baseUrl + "_api/web/lists/getbytitle('OEDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable",
    baseUrl + "_api/web/lists/getbytitle('DocDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable",
    baseUrl + "_api/web/lists/getbytitle('AHRDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable",
    baseUrl + "_api/web/lists/getbytitle('SRCDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"];
    
    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) { 
          console.log(data);
          if(data.d != null && data.d != undefined && data.d.results.length> 0){
              var table = $('#myTable').DataTable();
              table.rows.add(data.d.results).draw();
          }
        }
      }); 
    }
}

$(document).ready(function() {
    var collapsedGroups = {}; 
    var top = '';
    var parent = '';
    
  var table = $('#myTable').DataTable( {
  "pageLength": 100,
    "columns": [
      { "data": null, "defaultContent": "" },
      { "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 or Update Table',
      buttons:
      [{
      extend: "excel", className: "btn-dark"
    },
      {
      extend: "pdf", className: "btn-dark"
    },
       {
      extend: "print", className: "btn-dark"   
    },
    {
    text: 'Update Table',
    action: function (e, dt, node, config){
        $('#myModal').modal('show');
        }
    },
      ],
    }],
    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);
    });   
    
    
    $("#btn").click(function(e){
        var jsonData = {};        
        var formData = $("#myform").serializeArray();
        $.each(formData, function() {
                if (jsonData[this.name]) {
                if (!jsonData[this.name].push) {
                    jsonData[this.name] = [jsonData[this.name]];
                }
                jsonData[this.name].push(this.value || '');
            } else {
                jsonData[this.name] = this.value || '';
            }   
        });
        console.log(jsonData);
        $.ajax({  
                async: true, // Async by default is set to “true” load the script asynchronously  
                // URL to post data into sharepoint list  or your own url
                 url: baseUrl + "_api/web/lists/getbytitle('AMMO Deliverables')/items?$select=Program,Deliverable,To,Date,Approved,Notes",
                method: "POST", //Specifies the operation to create the list item  
                data: JSON.stringify({  
                    '__metadata': {  
                        'type': 'SP.Data.AMMO_x0020_DeliverablesListItem' // it defines the ListEnitityTypeName  
                    },  
                //Pass the parameters
                    'Program': $("#dProgram").val(),  
                    'Deliverable':$("#dDeliverable").val(),  
                    'To': $("#dTo").val(),  
                    'Date': $("#dDate").val(),  
                    'Approved': $("#dApproved").val(),  
                    'Notes': $("#dNotes").val()            
                }),  
                headers: {  
                    "accept": "application/json;odata=verbose", //It defines the Data format   
                    "content-type": "application/json;odata=verbose", //It defines the content type as JSON  
                    "X-RequestDigest": $("#__REQUESTDIGEST").val() //It gets the digest value   
                },  
                success: function(data) {  
                    alert("Item created successfully", "success"); 
                },  
                error: function(error) {  
                    console.log(JSON.stringify(error));  
        
                }  
        
            })  
        });
    });
#myform {
    margin:0 auto;
    width:250px;
    padding:14px;
    align: center;
}
h1{
text-align: center;
}
label {
    width: 10em;
    float: left;
    margin-right: 0.5em;
    display: block;
    vertical-align: middle;
}
.submit {
    float:right;
}

fieldset {
    background:#EBF4FB none repeat scroll 0 0;
    border:2px solid #B7DDF2;
    width: 450px;
}

legend {
    color: #fff;
    background: #80D3E2;
    border: 1px solid #781351;
    padding: 2px 6px
    text-align: center;
}
.elements {
    padding:10px;
}
p {
    border-bottom:1px solid #B7DDF2;
    color:#666666;
    font-size:12px;
    margin-bottom:20px;
    padding-bottom:10px;
}
span {
    color:#666666;
    font-size:12px;
    margin-bottom:1px;
    
}
.btn{
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  border: 1px solid #B7DDF2;
  
}
.modal-dialog-centered {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  min-height:calc(100% - (.5rem * 2));
}
.btn:hover{
  color: #333333;
  background-color: #e6e6e6;
}

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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.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"/>
  <div class ="heading">
  <h1 class="center"><strong>Deliverables</strong></h1>
  </div>
<div class ="container">
<table id="myTable" class="table table-bordered" cellspacing="0" width="100%">
  <thead class="thead-dark">
    <tr>
      <th></th>
      <th>Program</th>
      <th>Deliverable</th>
      <th>To</th>
      <th>Date</th>
      <th>Approved</th>
      <th>Notes</th>
    </tr>
  </thead>
</table>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Update DataTable</h4>
      </div>
      <div class="modal-body">
        
          
      <form id="myform" type="post">
  <fieldset>
    <legend align="center">Update Datatable</legend>
    <p>Please fill out the shown fields to add data to the DataTable</p>
    <div class="elements">
      <label for="program">Program :</label>
       <select name = "program" id = "dProgram">
            <option value = "AHR">AHR</option>
            <option value = "AMMO">AMMO</option>
            <option value = "DAR-Q">DAR-Q</option>
            <option value = "Doctrine Development">Doctrine Development</option>
            <option value = "Operational Energy">Operational Energy</option>
            <option value = "Ordnance Multimedia">Ordnance Multimedia</option>
            <option value = "SRC Handbook">SRC Handbook</option>
            <option value = "WTBn">WTBn</option>
         </select>
    </div>
     <div class="elements">
      <label for="Deliverable">Deliverable :</label>
      <select name="Deliverable" id="dDeliverable">
              <option value = "Meeting Minutes">Meeting Minutes</option>
            <option value = "Monthly Status Report (MSR)">Monthly Status Report (MSR)</option>
            </select>
    </div>  
    <div class="elements">
      <label for="To"> To:</label>
      <input type="text" align= "center" id="dTo" name="to" placeholder="example@example.com">
    </div>      
    <div class="elements">
    <label for="Date">Date: </label>
      <input type="date" align= "center" id="dDate" name="date" placeholder="MM/DD/YYYY"> 
</div>  
    <div class="elements">
      <label for="Approved">Approved :</label>
      <select name="Approved" id="dApproved">
              <option value = "Yes">Yes</option>
        <option value = "No">No</option></select>
</div>
      
      <div class="elements">
      <label for="Notes"> Notes :</label>
      <input type="text" align= "left" id="dNotes" name="notes" placeholder="Please provide notes">
   </div>
    
      <div class="submit">
       <input type="submit" id="btn-submit" name="btn-submit" class="btn-submit" value="Submit" />
    </div>
  </fieldset>
</form>    
          
          
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

您的 Snippit 包含如下错误/警告：

  1. URL 数组绑定，它是数组子元素上的字符串中断。
  2. 用于绑定的未定义对象，使用 Success 方法 data.value 中的 SharePoint Rest API 数据参数，而 REST API 将 JSON 结果作为 data.d.results 返回。
  3. 准备好多个文件
  4. baseUrl 变量未定义

其余的现在都很好，但需要更多的代码优化。设置 baseUrl = "http://webappurl"; 使用您的服务器/webappurl 并尝试此代码段。

试试这个snippit，希望现在可以帮助你。

推荐阅读