删除和请求:
$(function(){
load();
$("form").submit(function(){
$.ajax({
url:"http://localhost:8000/tag",
type:"POST",
data:{text:$("#text").val()},
success:function(res){
if(res.status===200){
load();
console.log("删除成功");
}
}
})
return false;
})
//前后端交互 删除数据
$(".col-xs-12").on("click", ".close", function(){
var id = $(this).attr("data-id");
$.ajax({
url:"http://localhost:3007/tag",
type:"DELETE",
data:{_id: id},
success: function(res){
if(res.status === 200){
console.log("删除成功");
}
}
})
})
function load(){
//前后端交互 请求数据
$.ajax({
url:"http://localhost:3007/tag",
type:"GET",
success:function(res){
if(res.status===200){
const data = res.data;
let html = "";
for (let index = 0; index < data.length; index++) {
const element = data[index];
html += `<div class="alert alert-info pull-left">
<button type="button" data-id="${element._id}" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>${element.text}</strong>
</div>`;
}
$(".col-xs-12").html(html);
}
console.log(res);
},
error:function(err){
console.log(err);
}
})
}
})
请求路径:
url:"http://localhost:3007/tag",
type:"GET",
bootstrap样式:
<button type="button" data-id="${element._id}"
class="close" data-dismiss="alert"
aria-hidden="true">×</button>
<strong>${element.text}</strong></div>
注解(删除、添加、查询、修改都是使用ajax的方法进行对数据库(后端)的修改)
添加代码: 原生(form提交):