我的Ajax功能無法正常工作時，我就刪除鏈接點擊，對於編輯鏈接

下面是我針對home.jsp頁面我的Ajax功能無法正常工作時，我就刪除鏈接點擊，對於編輯鏈接

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
 
    pageEncoding="ISO-8859-1"%> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
    <title>welcome</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
</head> 
 
<body onload="load();"> 
 
<input type="hidden" id="empId"> 
 
Name: <input type="text" id="emp_name" required="required" name="empName"><br> 
 
Address: <input type="text" id="emp_address" required="required" name="empAddress"><br> 
 
Salary: <input type="text" id="emp_salary" required="required" name="empSalary"><br> 
 
<button onclick="submit();">submit</button> 
 
<table id="table" border="1"> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Address</th> 
 
     <th>Salary</th> 
 
     <th>edit</th> 
 
     <th>delete</th> 
 
    </tr> 
 
</table> 
 
</body> 
 
<script type="text/javascript"> 
 
    data = ""; 
 
    load = function() { 
 
     $.ajax({ 
 
      url: 'getlist', 
 
      type: 'get', 
 
      success: function (response) { 
 
       data = response.data; 
 
       $('.tr').remove(); 
 
       for (i = 0; i < response.data.length; i++) { 
 
        $("#table").append("<tr class = 'tr'> <td>" + response.data[i].empName + "</td> \t <td>" + response.data[i].empAddress + "</td> <td>" + response.data[i].empSalary + "</td> <td><a href ='#' onclick = 'edit(" + i + ");'> edit </a> </td> <td> <a href ='#' onlclick = 'deleteEmp(" + response.data[i].empId + ");'> delete </a></td></tr>") 
 
       } 
 
      } 
 
     }); 
 
    } 
 
    edit = function (index) { 
 

 
     //when we click on edit, those value should be available in our table fields. 
 
     $("#empId").val(data[index].empId); 
 
     $("#emp_name").val(data[index].empName); 
 
     $("#emp_address").val(data[index].empAddress); 
 
     $("#emp_salary").val(data[index].empSalary); 
 
    } 
 
    submit = function() { 
 
     $.ajax({ 
 
      url: "saveOrUpdate", 
 
      method: "post", 
 
      data: { 
 
       empId: $("#empId").val(), 
 
       empName: $("#emp_name").val(), 
 
       empAddress: $("#emp_address").val(), 
 
       empSalary: $("#emp_salary").val() 
 
      }, 
 
      success: function (response) { 
 
       alert(response.message); 
 
       load(); 
 
      } 
 
     }); 
 
    } 
 
    deleteEmp = function (Id) { 
 
     $.ajax({ 
 
      url: 'delete', 
 
      method: 'put', 
 
      data: {empId: Id}, 
 
      success: function (response) { 
 
       alert(response.message); 
 
       load(); 
 
      } 
 
     }); 
 
    } 
 
</script> 
 
</html>

想法是，當我點擊刪除鏈接，它應該調用delete函數，然後它可以與Spring控制器類進行交互，但它不是預期的工作。我也給出了按預期工作的編輯鏈接（與刪除完全相似）。所以我很困惑，無法調試問題。

需要幫助，因爲我對所有這些和自己學習都很陌生。

來源

2017-05-29 Gaurav

檢查控制檯。你有什麼錯誤嗎？服務器是否返回任何數據？在成功方法中放置一個「調試器」並檢查「響應」變量的值。此外，在使用ajax調用時，始終使用'error'方法來確定是否發生錯誤。 –

另外請注意，從jQuery 1.8 **開始，不推薦使用'jqXHR.success（）'，'jqXHR.error（）'和'jqXHR.complete（）'回調函數。爲了準備代碼以便最終刪除它們，請改用'jqXHR.done（）'，'jqXHR.fail（）'和'jqXHR.always（）'。 –

'方法：'放'，'?? –

您在刪除鏈接的事件名稱中有錯字：onlclick。

但是，使用內嵌事件綁定不是不好的做法。試試這個：

var html = ""; 
for (i = 0; i < response.data.length; i++) { 
    html+= "<tr class = 'tr'> <td>" + response.data[i].empName + "</td> <td>" + response.data[i].empAddress + "</td> <td>" + response.data[i].empSalary + "</td> <td><a href ='#' class='edit-button'> edit </a> </td> <td> <a href ='#' class='delete-button' data-empid='" + response.data[i].empId + "'> delete </a></td></tr>"; 
} 
$("#table").append(html);

而且在全球範圍內：

$(document).ready(function() { 
    $("#table") 
     .on("click", ".delete-button", function() { 
      var empIp = $(this).data("empid"); 
      deleteEmp(empId); 
     }) 
     .on("click", ".edit-button", function() { 
      var index = $(this).closest("tr").index(); 
      edit(index); 
     }); 
});

的第一個片段將只使用一個append()調用創建的元素，並沒有行內事件綁定。

最後一個代碼段將點擊事件綁定到您的表，因此如果行創建爲dynamicaly，則不會進行更改，則不會每次創建事件。該刪除事件使用數據屬性得到empId和編輯事件發現由tr索引行的索引。

來源

2017-05-29 17:37:20 DontVoteMeDown

我的Ajax功能無法正常工作時，我就刪除鏈接點擊，對於編輯鏈接

回答

相關問題