需求 :使用ajax进行删除数据,删除完成后,自动刷新数据.
js代码
-
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
-
<script type="text/javascript">
-
$(function() {
-
$.ajax({
-
url : "priceAll",
-
type : "post",
-
});
-
});
-
function deleteGe(byid,obj){
-
if(window.confirm('你确定要刪除嗎?')){
-
$.ajax({
-
type: "POST",
-
url: "delete",
-
data: "id="+byid,
-
success: function(msg){
-
if(msg.type=="success"){
-
alert("刪除成功");
-
//刪掉 byid的節點
-
var tr=obj.parentNode.parentNode;
-
var tbody=tr.parentNode;
-
tbody.removeChild(tr);
-
}else{
-
alert("刪除失敗");
-
}
-
}
-
});
-
return true;
-
}else{
-
//alert("取消");
-
return false;
-
}
-
}
-
</script>
其中 href='javascript:' 主要是说明a标签需要执行一段js代码,并不需要跳转。this是onclick事件的拥有者即<a>标签
body代码
-
<table border="1" id="tb">
-
<tr>
-
<th colspan="3">关键字信息</th>
-
<th colspan="2">关键字价格设置</th>
-
<th colspan="2">关键字当前情况</th>
-
</tr>
-
<tr>
-
<td>序号</td>
-
<td>关键字</td>
-
<td>起价</td>
-
<td>竞价模式/竞技价格</td>
-
<td>竞前三名</td>
-
<td>质量度</td>
-
<td>当前前三名价格</td>
-
<td>操作</td>
-
</tr>
-
<c:forEach items="${list2 }" var="demo" varStatus="type">
-
<tr>
-
<td>${type.index+1}</td>
-
<td>${demo.keyword }</td>
-
<td>${demo.qiprice }</td>
-
<td></td>
-
<td></td>
-
<td>${demo.zhiliang }</td>
-
<td></td>
-
<td><a href="javascript:;" onclick="deleteGe(${demo.id },this)">删除</a></td>
-
</tr>
-
</c:forEach>
-
</table>
controller代码
-
//刪除關鍵字
-
@RequestMapping("/delete")
-
@ResponseBody
-
public Map<String,Object> deleteJing(Integer id,ModelAndView mv){
-
int i = jcs.DeleteKey(id);
-
Map<String,Object> resultMap = new HashMap<String, Object>();
-
if (i==1) {
-
resultMap.put("type", "success");
-
}else{
-
resultMap.put("type", "err");
-
}
-
mv.setViewName("/WEB-INF/jsp/guess");
-
return resultMap;
-
}
效果图为
有两种方法,setInterval(function,time)和setTimeout(function,time),function是要执行的函数,time是要延迟的时间,单位毫秒。虽然这两种方法都可以实现,但他们的实现原理是不同的,setTimeout是一个延迟方法,它会让函数延迟一段时间执行,这个函数只执行一次,不过我们使用递归调用,就可以做到定时执行函数,如:
function al(){
alert("that's ok");
setTimeout(al,1000);
}
如果我们用setInterval就不需要这样了,如下:
function bl(){
alert("ok");
}
setInterval(bl,1000);