Ajax删除成功刷新页面但是数据刷新不了需要手动刷新---详解

需求 :使用ajax进行删除数据,删除完成后,自动刷新数据.

 

js代码

 

1. <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>

2. <script type="text/javascript">

3. $(function() {

4. $.ajax({

5. url : "priceAll",

6. type : "post",

7. });

8. });

9.  

10. function deleteGe(byid,obj){

11. if(window.confirm('你确定要刪除嗎？')){

12. $.ajax({

13. type: "POST",

14. url: "delete",

15. data: "id="+byid,

16. success: function(msg){

17. if(msg.type=="success"){

18. alert("刪除成功");

19. //刪掉 byid的節點

20. var tr=obj.parentNode.parentNode;

21. var tbody=tr.parentNode;

22. tbody.removeChild(tr);

23. }else{

24. alert("刪除失敗");

25. }

26. }

27.  

28. });

29.  

30. return true;

31. }else{

32. //alert("取消");

33. return false;

34. }

35.  

36. }

37. </script>

 

其中   href='javascript:' 主要是说明a标签需要执行一段js代码，并不需要跳转。this是onclick事件的拥有者即<a>标签

 

body代码

 

1. <table border="1" id="tb">

2. <tr>

3. <th colspan="3">关键字信息</th>

4. <th colspan="2">关键字价格设置</th>

5. <th colspan="2">关键字当前情况</th>

6. </tr>

7.  

8. <tr>

9.  

10. <td>序号</td>

11. <td>关键字</td>

12. <td>起价</td>

13. <td>竞价模式/竞技价格</td>

14. <td>竞前三名</td>

15. <td>质量度</td>

16. <td>当前前三名价格</td>

17. <td>操作</td>

18.  

19. </tr>

20.  

21. <c:forEach items="${list2 }" var="demo" varStatus="type">

22. <tr>

23. <td>${type.index+1}</td>

24. <td>${demo.keyword }</td>

25. <td>${demo.qiprice }</td>

26. <td></td>

27. <td></td>

28. <td>${demo.zhiliang }</td>

29. <td></td>

30. <td><a href="javascript:;" onclick="deleteGe(${demo.id },this)">删除</a></td>

31. </tr>

32. </c:forEach>

33. </table>

 

controller代码

 

1. //刪除關鍵字

2. @RequestMapping("/delete")

3. @ResponseBody

4. public Map<String,Object> deleteJing(Integer id,ModelAndView mv){

5. int i = jcs.DeleteKey(id);

6. Map<String,Object> resultMap = new HashMap<String, Object>();

7. if (i==1) {

8. resultMap.put("type", "success");

9. }else{

10. resultMap.put("type", "err");

11. }

12. mv.setViewName("/WEB-INF/jsp/guess");

13. return resultMap;

14. }

 

效果图为

 

 

 

 

有两种方法，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);