HTML 表单不通过 AJAX Post 发送数据
[英]HTML Form Doesn't Send Data through 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">×</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 -->
3 个解决方案
解决方案1
-1 2020-09-16 19:43:24
所以我在我的环境 SP-OnPrem 2013 中进行了测试，并使用了脚本编辑器 webpart。 这是结果。 我用可交付成果制作了两个列表并将其保存在 Test1Deliverable 中。
哦，天哪，我以为您可以从输入字段值中绑定变量以将它们插入到 SP 列表中，但您将它们分配为输入 html 中的字段名称，这是很明显的。 所以你需要替换这部分脚本
'Program': program,
'Deliverable': deliverable,
'To': to,
'Date': date,
'Approved': approved,
'Notes': notes
Replace with
'Program': $("#dProgram").val(),
'Deliverable':$("#dDeliverable").val(),
'To': $("#dTo").val(),
'Date': $("#dDate").val(),
'Approved': $("#dApproved").val(),
'Notes': $("#dNotes").val()
注意：我为所有输入和选择元素提供了 Id，并使用它们的值将它们发布到 SP 中。 提交后，只需刷新页面或再次调用 loadData() ，在我的情况下使用 Notes1 和 Date1 列。
如果是我的脚本编辑器代码：
<style type="text/css">
#myform {
margin:0 auto;
width:250px;
padding:14px;
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;
}
.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;
}
</style>
<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"/>
<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>
<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 = "True">Yes</option>
<option value = "False">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" name="btn" class="btn" value="Submit" />
</div>
</fieldset>
</form>
<script type="text/javascript">
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],
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
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( {
"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);
});
});
$(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) {
alert("Item created successfully", "success"); // Used sweet alert for success message
},
error: function(error) {
console.log(JSON.stringify(error));
}
})
});
});
</script>
</div>
解决方案2
-1 已采纳 2020-09-16 20:44:58
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">×</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 包含如下错误/警告：
- URL 数组绑定，它是数组子项上的字符串中断。
- 用于绑定的未定义对象，使用 Success 方法 data.value 中的 SharePoint Rest API 数据参数，而 REST API 将 JSON 结果作为 data.d.results 返回。
- 准备好多个文件
- 未定义 baseUrl 变量
剩下的一切现在都很好，但需要更多的代码优化。 设置 baseUrl = "http://webappurl"; 使用您的服务器/webappurl 并尝试此代码段。
试试这个 snippit，希望这现在可以帮助你。
解决方案3
-3 2020-09-16 15:41:52
你不需要太多的脚本，最好的方法是使用 return false 通过 onsubmit 方法提交表单。 您可以为此使用 Jquery post 方法。
form.serialize（）不会在Ajax $ .post（）中发送所有值
[英]form.serialize() doesn't send all values in the Ajax $.post()
表格 AJAX PHP 不会将 POST 数据发送到 WordPress 数据库
[英]Form AJAX PHP doesn't send POST datas to WordPress Database
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.