如何从Javascript函数调用Ajax
如何从Javascript函数调用Ajax
提问于 2018-06-01 22:26:22
我在一个附加了onclick()函数的html表的<td>中有一个delete按钮。如何从这个函数调用ajax，也就是说，我想要获取<tr>中的值并将其发送到一个URL。
<script>
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
id = row.cells[0].textContent;
//call ajax, pass id as data
}
</script>
<body>
<table>
<tr>
<th>Id</th>
<th>Lastname</th>
<th>Firstname</th>
<th></th>
</tr>
<tr>
<td>122</td>
<td>Jackson</td>
<td>Evans</td>
<td><button type="button" onclick="deleteRow(this)">Delete row</button></td>
</tr>
</table>
</body>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-01 22:29:49
你可以在这里用到一些东西。遵循JavaScript部分的评论：
// Run at document load.
$(function () {
// Get the button. Make it unobtrusive as there could be more.
// Execute this on click event.
$(".del-btn").click(function () {
// Fire an AJAX call.
$.post("/path/to/delete", {id: $(this).closest("tr").find("td:first").text()}, function () {
$(this).closest("tr").fadeOut();
});
});
});<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<table>
<tr>
<th>Id</th>
<th>Lastname</th>
<th>Firstname</th>
<th></th>
</tr>
<tr>
<td>122</td>
<td>Jackson</td>
<td>Evans</td>
<td><button type="button" class="del-btn">Delete row</button></td>
</tr>
</table>
正如Sid所提到的，我还要求您使用data-*属性，而不要完全依赖于DOM来实现数据目的。这将需要您更改：
// Run at document load.
$(function () {
// Get the button. Make it unobtrusive as there could be more.
// Execute this on click event.
$(".del-btn").click(function () {
// Fire an AJAX call.
$.post("/path/to/delete", {id: $(this).closest("tr").data("id")}, function () {
$(this).closest("tr").fadeOut();
});
});
});<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<table>
<tr>
<th>Id</th>
<th>Lastname</th>
<th>Firstname</th>
<th></th>
</tr>
<tr data-id="122">
<td>122</td>
<td>Jackson</td>
<td>Evans</td>
<td><button type="button" class="del-btn">Delete row</button></td>
</tr>
</table>
Stack Overflow用户
发布于 2018-06-01 22:30:19
我不想给出直接的答案。使用jquery的示例代码是：
$("selector").click(function(){
$.post("/your/path", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50645650
复制相关文章
相似问题