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();
  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));
  41. }
  43. })
  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() {
  3. $.ajax({
  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
  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
  13. },
  14. success: function(data) {
  15. data = data.d.results;
  16. //Iterate the data
  17. $.each(data, function(index, value) {
  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
  30. });
  32. table = $('#subsiteList').DataTable(); //initialize the datatable
  33. },
  34. error: function(error) {
  35. console.log(JSON.stringify(error));
  37. }
  39. })
  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();
  11. $.ajax({
  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();
  43. //Bind the data into datatable
  44. getItems();
  45. },
  46. error: function(error) {
  47. console.log(JSON.stringify(error));
  49. }
  51. })
  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) {
  4. $.ajax({
  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) {
  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();
  26. getItems();
  27. },
  28. error: function(error) {
  29. console.log(JSON.stringify(error));
  31. }
  33. })
  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">
  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>
  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>
  176. </html>
Full Code

  2. $(document).ready(function() {
  4. getItems();
  6. });
  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();
  19. $.ajax({
  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) {
  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("");
  51. swal("Item created successfully", "success");
  53. if ($.fn.DataTable.isDataTable('#subsiteList')) {
  54. $('#subsiteList').DataTable().destroy();
  55. }
  56. $('#subsiteList tbody').empty();
  59. getItems();
  60. },
  61. error: function(error) {
  62. console.log(JSON.stringify(error));
  64. }
  66. })
  68. }
  71. function getItems() {
  73. $.ajax({
  75. async: true,
  76. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items",
  77. method: "GET",
  79. headers: {
  80. "accept": "application/json;odata=verbose",
  81. "content-type": "application/json;odata=verbose"
  83. },
  84. success: function(data) {
  85. data = data.d.results;
  86. console.log(data);
  87. $.each(data, function(index, value) {
  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);
  92. });
  94. table = $('#subsiteList').DataTable();
  95. },
  96. error: function(error) {
  97. console.log(JSON.stringify(error));
  99. }
  101. })
  104. }
  106. function edit(value) {
  108. $.ajax({
  110. async: true,
  111. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/GetItemByID(" + value + ")",
  112. method: "GET",
  114. headers: {
  115. "accept": "application/json;odata=verbose",
  116. "content-type": "application/json;odata=verbose"
  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);
  131. },
  132. error: function(error) {
  133. console.log(JSON.stringify(error));
  135. }
  138. })
  140. uId = value;
  141. }
  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();
  155. $.ajax({
  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");
  182. if ($.fn.DataTable.isDataTable('#subsiteList')) {
  183. $('#subsiteList').DataTable().destroy();
  184. }
  185. $('#subsiteList tbody').empty();
  188. getItems();
  189. },
  190. error: function(error) {
  191. console.log(JSON.stringify(error));
  193. }
  195. })
  198. }
  202. function deleteItem(value) {
  204. $.ajax({
  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) {
  218. swal("Deleted!", "Item Deleted successfully", "success");
  220. if ($.fn.DataTable.isDataTable('#subsiteList')) {
  221. $('#subsiteList').DataTable().destroy();
  222. }
  223. $('#subsiteList tbody').empty();
  226. getItems();
  227. },
  228. error: function(error) {
  229. console.log(JSON.stringify(error));
  231. }
  233. })
  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!.....