Post
Ask Question

CRUD Operations In SharePoint REST API Using jQuery AJAX

In this article, I have explained how to perform create, read, update, and delete operations on SharePoint list items using HTTP requests.

HTTP Request Use
GET This method helps to fetch the information fromSharepoint list
POST This method helps to create or update the list items in sharepoint listPUT: Required all the object properties to update the resourcesMerge: Optional to required all the object properties to update the resources
PUT/MERGE This method helps to update the existing object using X-HTTP method
DELETE This method helps to delete the object from sharepoint list

Open sharepoint site,

Create a list name “Employee” to play Create, Read, Update, Delete Operations using HTTP RequestsP


“POST” method used to create Item in the sharepoint list

 URL 

http://<Sharepoint SiteURL>/_api/web/lists/Getbytitle(listname)/items 


  2. function createListItem() {  
  3.     //Fetch the values from the input elements  
  4.     var eName = $('#txtempname').val();  
  5.     var eDesg = $('#txtdesignation').val();  
  6.     var eEmail = $('#txtemail').val();  
  7.     var eMobile = $('#txtmobile').val();  
  8.     var eBloodGroup = $('#txtbloodgrp').val();  
  9.     var eComAddress = $('#txtaddress').val();  
  10.     var eEmergency = $('#txtemergency').val();  
  11.   
  12.     $.ajax({  
  13.         async: true, // Async by default is set to “true” load the script asynchronously  
  14.         // URL to post data into sharepoint list  
  15.         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items",  
  16.         method: "POST", //Specifies the operation to create the list item  
  17.         data: JSON.stringify({  
  18.             '__metadata': {  
  19.                 'type': 'SP.Data.EmployeeListItem' // it defines the ListEnitityTypeName  
  20.             },  
  21. //Pass the parameters
  22.             'EmployeeName': eName,  
  23.             'Designation': eDesg,  
  24.             'Email': eEmail,  
  25.             'Mobile': eMobile,  
  26.             'BloodGroup': eBloodGroup,  
  27.             'CommunicationAddress': eComAddress,  
  28.             'EmergencyContact': eEmergency  
  29.         }),  
  30.         headers: {  
  31.             "accept": "application/json;odata=verbose", //It defines the Data format   
  32.             "content-type": "application/json;odata=verbose", //It defines the content type as JSON  
  33.             "X-RequestDigest": $("#__REQUESTDIGEST").val() //It gets the digest value   
  34.         },  
  35.         success: function(data) {  
  36.             swal("Item created successfully", "success"); // Used sweet alert for success message  
  37.         },  
  38.         error: function(error) {  
  39.             console.log(JSON.stringify(error));  
  40.   
  41.         }  
  42.   
  43.     })  
  44.   
  45. }  

"GET" Method used to Fetch the list items from the sharepoint list

URL

http://<Sharepoint SiteURL>/_api/web/lists/Getbytitle(listname)/items
  1. function getItems() {  
  2.   
  3.     $.ajax({  
  4.   
  5.         async: true,  // Async by default is set to “true” load the script asynchronously
  6.         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items",   // URL to fetch data from sharepoint list
  7.         method: "GET",  //Specifies the operation to fetch the list item
  8.   
  9.         headers: {  
  10.             "accept": "application/json;odata=verbose",   //It defines the Data format
  11.             "content-type": "application/json;odata=verbose"   //It defines the content type as JSON
  12.   
  13.         },  
  14.         success: function(data) {  
  15.             data = data.d.results;  
  16.            //Iterate the data
  17.             $.each(data, function(index, value) {  
  18.   
  19.                 var html = "<tr><td>" + value.EmployeeName + "</td><td>" + value.Designation + "</td><td>" + value.Email + "</td>
  20. <td>" + value.BloodGroup + "</td><td>" + value.CommunicationAddress + "</td>
  21. <td>" + value.EmergencyContact + "</td><td>" + value.Mobile + "</td>
  22. <td>
  23. <a href='#' data-target='#ModalForUpdateEmployee' data-toggle='modal' onclick='edit(" + value.Id + ")'>
  24. <img src='https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/003-edit-document.png'>
  25. </a></td><td><a href='#' onclick='deleteItem(" + value.Id + ");'>
  26. <img src='https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/001-delete.png'></a></td>
  27. </tr>";  
  28.                 $('.table tbody').append(html);  //Append the HTML
  29.   
  30.             });  
  31.   
  32.             table = $('#subsiteList').DataTable();  //initialize the datatable
  33.         },  
  34.         error: function(error) {  
  35.             console.log(JSON.stringify(error));  
  36.   
  37.         }  
  38.   
  39.     })  
  40.   
  41.   
  42. }  
"MERGE" Method used to perform update the item in sharepoint list

URL

http://<Sharepoint SiteURL>/_api/web/lists/Getbytitle(listname)/items(itemid) 
  1. function update(uId) {  
  2. //Fetch the values from the input elements
  3.     var eName = $('#txtempnames').val();  
  4.     var eDesg = $('#txtdesignations').val();  
  5.     var eEmail = $('#txtemails').val();  
  6.     var eMobile = $('#txtmobiles').val();  
  7.     var eBloodGroup = $('#txtbloodgrps').val();  
  8.     var eComAddress = $('#txtaddresss').val();  
  9.     var eEmergency = $('#txtemergencys').val();  
  10.   
  11.     $.ajax({  
  12.   
  13.      
  14.         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items(" + uId + ")",  
  15.         method: "POST",  
  16.         data: JSON.stringify({  
  17.             '__metadata': {  
  18.                 'type': 'SP.Data.EmployeeListItem'  
  19.             },  
  20.             'EmployeeName': eName,  
  21.             'Designation': eDesg,  
  22.             'Email': eEmail,  
  23.             'Mobile': eMobile,  
  24.             'BloodGroup': eBloodGroup,  
  25.             'CommunicationAddress': eComAddress,  
  26.             'EmergencyContact': eEmergency  
  27.         }),  
  28.         headers: {  
  29.             "accept": "application/json;odata=verbose",  
  30.             "content-type": "application/json;odata=verbose",  
  31.             "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  32.             "IF-MATCH": "*",             //Overrite the changes in the sharepoint list item
  33.             "X-HTTP-Method": "MERGE"      // Specifies the update operation in sharepoint list
  34.         },  
  35.         success: function(data) {  
  36.              swal( "Item Updated successfully", "success");
  37.              //Reninitialize the datatable
  38.             if ($.fn.DataTable.isDataTable('#subsiteList')) {  
  39.                 $('#subsiteList').DataTable().destroy();  
  40.             }  
  41.             $('#subsiteList tbody').empty();  
  42.   
  43.       //Bind the data into datatable
  44.             getItems();  
  45.         },  
  46.         error: function(error) {  
  47.             console.log(JSON.stringify(error));  
  48.   
  49.         }  
  50.   
  51.     })  
  52.   
  53.   
  54. }  
"DELETE" method used to perfoms delete items in the sharepoint list
 
URL

http://<Sharepoint SiteURL>/_api/web/lists/Getbytitle(listname)/items(itemid)

  2. function deleteItem(value) {    
  3.     
  4.     $.ajax({    
  5.     
  6.     
  7.         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items(" + value + ")",    
  8.         method: "POST",    
  9.         headers: {    
  10.             "accept": "application/json;odata=verbose",    
  11.             "content-type": "application/json;odata=verbose",    
  12.             "X-RequestDigest": $("#__REQUESTDIGEST").val(),    
  13.             "IF-MATCH": "*",    
  14.             "X-HTTP-Method": "DELETE"    
  15.         },    
  16.         success: function(data) {    
  17.     
  18.             swal("Deleted!", "Item Deleted successfully", "success");    
  19.              //Renitialize the datatable  
  20.             if ($.fn.DataTable.isDataTable('#subsiteList')) {    
  21.                 $('#subsiteList').DataTable().destroy();    
  22.             }    
  23.             $('#subsiteList tbody').empty();    
  24.     
  25.     
  26.             getItems();    
  27.         },    
  28.         error: function(error) {    
  29.             console.log(JSON.stringify(error));    
  30.     
  31.         }    
  32.     
  33.     })    
  34.     
  35.     
  36. }    
HTML Code
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <script src="https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/jquery-1.12.4.js"></script>  
  6.     <script src="https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/jquery.dataTables.min.js"></script>  
  7.     <script src="https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/dataTables.bootstrap.min.js"></script>  
  8.     <script src="https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/bootstrap.min.js"></script>  
  9.     <link rel="stylesheet" type="text/css" href="https://sharepointtechie.sharepoint.com/sites/auto/SiteAssets/CRUD/dataTables.bootstrap.min.css" />  
  10.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />  
  11.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />  
  12.     <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js" type="text/javascript"></script>  
  13.     <script src="https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/Script.js"></script>  
  14.     <link rel="stylesheet" href="https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/Style.css" type="text/css" /> </head>  
  15.   
  16. <body>  
  17.     <div class="container">  
  18.         <div id="row4" class="row nopadding ">  
  19.             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-horizontal padLeftRight">  
  20.                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pleft0 pright0">  
  21.                     <div class="announcment paddingwebpart " style="background:white;">  
  22.                         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pleft0 pright0">  
  23.                             <h5 id="BtnAlign"> <a class="addbtn" target="_blank" style="color:white; text-decoration:none" data-target="#ModalForNewProject" data-toggle="modal">New Employee</a> </h5> <br> </div>  
  24.                         <table id="subsiteList" class="table table-striped table-bordered">  
  25.                             <thead>  
  26.                                 <tr>  
  27.                                     <th>Employee Name</th>  
  28.                                     <th>Designation</th>  
  29.                                     <th>Address</th>  
  30.                                     <th>Email</th>  
  31.                                     <th>Blood Group</th>  
  32.                                     <th>Emergency Contact</th>  
  33.                                     <th>Mobile</th>  
  34.                                     <th>Edit</th>  
  35.                                     <th>Delete</th>  
  36.                                 </tr>  
  37.                             </thead>  
  38.                             <tbody></tbody>  
  39.                         </table>  
  40.                     </div>  
  41.                 </div>  
  42.             </div>  
  43.         </div>  
  44.         <div class="modal fade" id="ModalForNewProject" role="dialog" title="Create new Project">  
  45.             <div class="modal-dialog">  
  46.                 <fieldset>  
  47.                     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cls-contriute">  
  48.                         <h5 class="contributtitle">Add Employee Information</h5>  
  49.                     </div>  
  50.                 </fieldset>  
  51.                 <div id="ModelBody">  
  52.                     <div class="form-horizontal well bs-component cls-divthoug" id="ModalValidation">  
  53.                         <fieldset id="bodymodal">  
  54.                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Employee Name  
  55. <span class="red">*</span>  
  56. </label>  
  57.                                 <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtempname" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
  58.                             </div>  
  59.                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Designation  
  60. <span class="red">*</span>  
  61. </label>  
  62.                                 <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtdesignation" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
  63.                             </div>  
  64.                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Email  
  65. <span class="red">*</span>  
  66. </label>  
  67.                                 <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtemail" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
  68.                             </div>  
  69.                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Mobile  
  70. <span class="red">*</span>  
  71. </label>  
  72.                                 <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtmobile" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
  73.                             </div>  
  74.                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Blood Group  
  75. <span class="red">*</span>  
  76. </label>  
  77.                                 <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtbloodgrp" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
  78.                             </div>  
  79.                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Address for communication  
  80. <span class="red">*</span>  
  81. </label>  
  82.                                 <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtaddress" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
  83.                             </div>  
  84.                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Emergency contact  
  85. <span class="red">*</span>  
  86. </label>  
  87.                                 <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtemergency" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
  88.                             </div>  
  89.                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">  
  90.                                 <div class="col-lg-offset-7 col-lg-2 cls-divbtn "> <input class="cls-savecancel" id="btnsave" type="button" onclick="createListItem();" value="Submit" /> </div>  
  91.                                 <div class="col-lg-2 col-lg-offset-1"> <input class="cls-savecancel" type="reset" value="Cancel" id="btnCancel" data-dismiss="modal" /> </div>  
  92.                             </div>  
  93.                         </fieldset>  
  94.                     </div>  
  95.                     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group cls-sucees" style="background-color:#edeff2">  
  96.                         <div id="successMessage"></div>  
  97.                     </div>  
  98.                 </div>  
  99.                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group LoadingDiv" id="loader" style="display:none;padding: 66px;background-color: #0a2f7d!important;">  
  100.                     <div class="loader">Loading...</div>  
  101.                     <div class="loader1">  
  102.                         <p class="ones"></p>  
  103.                     </div>  
  104.                 </div>  
  105.             </div>  
  106.         </div>  
  107.     </div>  
  108.     <!-- update modal -->  
  109.     <div class="modal fade" id="ModalForUpdateEmployee" role="dialog" title="Update New Employee">  
  110.         <div class="modal-dialog">  
  111.             <fieldset>  
  112.                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cls-contriute">  
  113.                     <h5 class="contributtitle">Update Employee Information</h5>  
  114.                 </div>  
  115.             </fieldset>  
  116.             <div id="ModelBody">  
  117.                 <div class="form-horizontal well bs-component cls-divthoug" id="ModalValidation">  
  118.                     <fieldset id="bodymodal">  
  119.                         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Employee Name  
  120. <span class="red">*</span>  
  121. </label>  
  122.                             <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtempnames" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
  123.                         </div>  
  124.                         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Designation  
  125. <span class="red">*</span>  
  126. </label>  
  127.                             <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtdesignations" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
  128.                         </div>  
  129.                         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Email  
  130. <span class="red">*</span>  
  131. </label>  
  132.                             <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtemails" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
  133.                         </div>  
  134.                         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Mobile  
  135. <span class="red">*</span>  
  136. </label>  
  137.                             <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtmobiles" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
  138.                         </div>  
  139.                         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Blood Group  
  140. <span class="red">*</span>  
  141. </label>  
  142.                             <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtbloodgrps" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
  143.                         </div>  
  144.                         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Address for communication  
  145. <span class="red">*</span>  
  146. </label>  
  147.                             <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtaddresss" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
  148.                         </div>  
  149.                         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Emergency contact  
  150. <span class="red">*</span>  
  151. </label>  
  152.                             <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtemergencys" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
  153.                         </div>  
  154.                         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">  
  155.                             <div class="col-lg-offset-7 col-lg-2 cls-divbtn "> <input class="cls-savecancel" id="btnsave" type="button" onclick="update(uId);" value="Submit" /> </div>  
  156.                             <div class="col-lg-2 col-lg-offset-1"> <input class="cls-savecancel" type="reset" value="Cancel" id="btnCancel" data-dismiss="modal" /> </div>  
  157.                         </div>  
  158.                     </fieldset>  
  159.                 </div>  
  160.                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group cls-sucees" style="background-color:#edeff2">  
  161.                     <div id="successMessage"></div>  
  162.                 </div>  
  163.             </div>  
  164.             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group LoadingDiv" id="loader" style="display:none;padding: 66px;background-color: #0a2f7d!important;">  
  165.                 <div class="loader">Loading...</div>  
  166.                 <div class="loader1">  
  167.                     <p class="ones"></p>  
  168.                 </div>  
  169.             </div>  
  170.         </div>  
  171.     </div>  
  172.     </div>  
  173.     <!--end-->  
  174. </body>  
  175.   
  176. </html>  
Full Code 

  2. $(document).ready(function() {  
  3.   
  4.     getItems();  
  5.   
  6. });  
  7.   
  8.   
  9.   
  10. function createListItem() {  
  11.     var eName = $('#txtempname').val();  
  12.     var eDesg = $('#txtdesignation').val();  
  13.     var eEmail = $('#txtemail').val();  
  14.     var eMobile = $('#txtmobile').val();  
  15.     var eBloodGroup = $('#txtbloodgrp').val();  
  16.     var eComAddress = $('#txtaddress').val();  
  17.     var eEmergency = $('#txtemergency').val();  
  18.   
  19.     $.ajax({  
  20.   
  21.         async: true,  
  22.         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items",  
  23.         method: "POST",  
  24.         data: JSON.stringify({  
  25.             '__metadata': {  
  26.                 'type': 'SP.Data.EmployeeListItem'  
  27.             },  
  28.             'EmployeeName': eName,  
  29.             'Designation': eDesg,  
  30.             'Email': eEmail,  
  31.             'Mobile': eMobile,  
  32.             'BloodGroup': eBloodGroup,  
  33.             'CommunicationAddress': eComAddress,  
  34.             'EmergencyContact': eEmergency  
  35.         }),  
  36.         headers: {  
  37.             "accept": "application/json;odata=verbose",  
  38.             "content-type": "application/json;odata=verbose",  
  39.             "X-RequestDigest": $("#__REQUESTDIGEST").val()  
  40.         },  
  41.         success: function(data) {  
  42.   
  43.             var eName = $('#txtempname').val("");  
  44.             var eDesg = $('#txtdesignation').val("");  
  45.             var eEmail = $('#txtemail').val("");  
  46.             var eMobile = $('#txtmobile').val("");  
  47.             var eBloodGroup = $('#txtbloodgrp').val("");  
  48.             var eComAddress = $('#txtaddress').val("");  
  49.             var eEmergency = $('#txtemergency').val("");  
  50.   
  51.             swal("Item created successfully", "success");  
  52.   
  53.             if ($.fn.DataTable.isDataTable('#subsiteList')) {  
  54.                 $('#subsiteList').DataTable().destroy();  
  55.             }  
  56.             $('#subsiteList tbody').empty();  
  57.   
  58.   
  59.             getItems();  
  60.         },  
  61.         error: function(error) {  
  62.             console.log(JSON.stringify(error));  
  63.   
  64.         }  
  65.   
  66.     })  
  67.   
  68. }  
  69.   
  70.   
  71. function getItems() {  
  72.   
  73.     $.ajax({  
  74.   
  75.         async: true,  
  76.         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items",  
  77.         method: "GET",  
  78.   
  79.         headers: {  
  80.             "accept": "application/json;odata=verbose",  
  81.             "content-type": "application/json;odata=verbose"  
  82.   
  83.         },  
  84.         success: function(data) {  
  85.             data = data.d.results;  
  86.             console.log(data);  
  87.             $.each(data, function(index, value) {  
  88.   
  89.                 var html = "<tr><td>" + value.EmployeeName + "</td><td>" + value.Designation + "</td><td>" + value.Email + "</td><td>" + value.BloodGroup + "</td><td>" + value.CommunicationAddress + "</td><td>" + value.EmergencyContact + "</td><td>" + value.Mobile + "</td><td><a href='#' data-target='#ModalForUpdateEmployee' data-toggle='modal' onclick='edit(" + value.Id + ")'><img src='https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/003-edit-document.png'></a></td><td><a href='#' onclick='deleteItem(" + value.Id + ");'><img src='https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/001-delete.png'></a></td></tr>";  
  90.                 $('.table tbody').append(html);  
  91.   
  92.             });  
  93.   
  94.             table = $('#subsiteList').DataTable();  
  95.         },  
  96.         error: function(error) {  
  97.             console.log(JSON.stringify(error));  
  98.   
  99.         }  
  100.   
  101.     })  
  102.   
  103.   
  104. }  
  105.   
  106. function edit(value) {  
  107.   
  108.     $.ajax({  
  109.   
  110.         async: true,  
  111.         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/GetItemByID(" + value + ")",  
  112.         method: "GET",  
  113.   
  114.         headers: {  
  115.             "accept": "application/json;odata=verbose",  
  116.             "content-type": "application/json;odata=verbose"  
  117.   
  118.         },  
  119.         success: function(data) {  
  120.             console.log(data.d.EmployeeName);  
  121.             eName = $('#txtempnames').val(data.d.EmployeeName);  
  122.             eDesg = $('#txtdesignations').val(data.d.Designation);  
  123.             eEmail = $('#txtemails').val(data.d.Email);  
  124.             eMobile = $('#txtmobiles').val(data.d.Mobile);  
  125.             eBloodGroup = $('#txtbloodgrps').val(data.d.BloodGroup);  
  126.             eComAddress = $('#txtaddresss').val(data.d.CommunicationAddress);  
  127.             eEmergency = $('#txtemergencys').val(data.d.EmergencyContact);  
  128.   
  129.   
  130.   
  131.         },  
  132.         error: function(error) {  
  133.             console.log(JSON.stringify(error));  
  134.   
  135.         }  
  136.   
  137.   
  138.     })  
  139.   
  140.     uId = value;  
  141. }  
  142.   
  143.   
  144.   
  145.   
  146. function update(uId) {  
  147.     var eName = $('#txtempnames').val();  
  148.     var eDesg = $('#txtdesignations').val();  
  149.     var eEmail = $('#txtemails').val();  
  150.     var eMobile = $('#txtmobiles').val();  
  151.     var eBloodGroup = $('#txtbloodgrps').val();  
  152.     var eComAddress = $('#txtaddresss').val();  
  153.     var eEmergency = $('#txtemergencys').val();  
  154.   
  155.     $.ajax({  
  156.   
  157.   
  158.         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items(" + uId + ")",  
  159.         method: "POST",  
  160.         data: JSON.stringify({  
  161.             '__metadata': {  
  162.                 'type': 'SP.Data.EmployeeListItem'  
  163.             },  
  164.             'EmployeeName': eName,  
  165.             'Designation': eDesg,  
  166.             'Email': eEmail,  
  167.             'Mobile': eMobile,  
  168.             'BloodGroup': eBloodGroup,  
  169.             'CommunicationAddress': eComAddress,  
  170.             'EmergencyContact': eEmergency  
  171.         }),  
  172.         headers: {  
  173.             "accept": "application/json;odata=verbose",  
  174.             "content-type": "application/json;odata=verbose",  
  175.             "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  176.             "IF-MATCH": "*",  
  177.             "X-HTTP-Method": "MERGE"  
  178.         },  
  179.         success: function(data) {  
  180.             swal("Item Updated successfully", "success");  
  181.   
  182.             if ($.fn.DataTable.isDataTable('#subsiteList')) {  
  183.                 $('#subsiteList').DataTable().destroy();  
  184.             }  
  185.             $('#subsiteList tbody').empty();  
  186.   
  187.   
  188.             getItems();  
  189.         },  
  190.         error: function(error) {  
  191.             console.log(JSON.stringify(error));  
  192.   
  193.         }  
  194.   
  195.     })  
  196.   
  197.   
  198. }  
  199.   
  200.   
  201.   
  202. function deleteItem(value) {  
  203.   
  204.     $.ajax({  
  205.   
  206.   
  207.         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items(" + value + ")",  
  208.         method: "POST",  
  209.         headers: {  
  210.             "accept": "application/json;odata=verbose",  
  211.             "content-type": "application/json;odata=verbose",  
  212.             "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  213.             "IF-MATCH": "*",  
  214.             "X-HTTP-Method": "DELETE"  
  215.         },  
  216.         success: function(data) {  
  217.   
  218.             swal("Deleted!", "Item Deleted successfully", "success");  
  219.   
  220.             if ($.fn.DataTable.isDataTable('#subsiteList')) {  
  221.                 $('#subsiteList').DataTable().destroy();  
  222.             }  
  223.             $('#subsiteList tbody').empty();  
  224.   
  225.   
  226.             getItems();  
  227.         },  
  228.         error: function(error) {  
  229.             console.log(JSON.stringify(error));  
  230.   
  231.         }  
  232.   
  233.     })  
  234.   
  235.   
  236. }  
just add the content editor into the page and link the HTML file 
 
Output
 
  
 
So in this article you learned how to create, read, update, delete operations using HTTP Request   
 
 Happy Sharepointing!..... 


Similar Articles