【ajax实战09】内容管理页面——删除功能

原创 于 2024-06-28 16:55:27 发布
· 518 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #前端 #javascript

本文章目标：点击删除图标实现对应数据删除
实现步骤如下：

一：将服务器端获取数据中数据id值绑定到删除图标（重点）

即在渲染时，利用自定义属性，为td设置id值

<td data-id = "${ele.id}">
     <i class="bi bi-pencil-square edit"></i>
     <i class="bi bi-trash3 del"></i>
</td>

二：利用事件委托，绑定点击事件，并获取文章id

三：向服务器传递数据


                

                
                
        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    



                



	

		

			

				
					
Ajax入门——第一节：案例：用jQuery和Ajax编码的图书管理系统

				
			

			

				

					123加油的博客
				

				

					07-05
					
					1785
					
				

			

		

		

			
				
用到的 css 库 
用到的 javascript 库 
用到的 vs code 插件 1.先导入和
2.然后写HTML文件，利用Bootstrap 3 Snippets插件，进行页面的渲染，如下：

5. 运行的结果如下：

6.继续渲染UI界面，输入 插入

7.按下enter键，产生如下代码：


8.复制类名为的类，产生3个输入框，再写一个按钮

9. 渲染的ui效果如下

10.为了让3个输入框和一个按钮横向排列，在总类里面加入类名即可，为了美观，并加个边距

11.结果：

12.表格，输入bs

			
		

	



                

            
              



	

		

			

				
					
Node实战——幼教平台

				
			

			

				

					12-03
				

			

		

		

			
				
在本项目"Node实战——幼教平台"中，我们将探讨如何使用Node.js技术栈构建一个教育平台，特别是针对幼儿教育的资源部分。这个平台包含了文章的展示与修改功能，同时涉及用户权限管理，确保安全、有效的教育资源管理...

			
		

	



              


  
              

                


	

		

			

				
					
清除AJAX的缓存,清除AJAX的缓存

				
			

			

				

					05-25
				

			

		

		

			
				
清除AJAX的缓存;
清除AJAX的缓存
清除AJAX的缓存
清除AJAX的缓存

			
		

	





	

		

			

				
					
jQuery之ajax删除

				
			

			

				

					weixin_34146805的博客
				

				

					09-26
					
					504
					
				

			

		

		

			
				
ajax是局部刷新。
用jQuery来实现，会简化很多。
下面进行详细的说明，结合一个ajax删除的案例来进行。
首先看html界面的代码：

&lt;a href="javascript:;"  onclick="delete_order('&lt;?php echo $item[order_id]; ?&gt;')"&gt;&lt;img src="images/admin/dele...

			
		

	



		

			
		



	

		

			

				
					
ajax批量删除

				
			

			

				

					zb0109的博客
				

				

					12-01
					
					2447
					
				

			

		

		

			
				
<th><input type="checkbox" class="checkAll"></th>


<td><input type="checkbox" class="checks" value="{$val.id}"></td>


// 全选全不选
    $('.checkAll').click(function (){
        $('.checks').prop('checked',$(this).prop('ch.

			
		

	





	

		

			

				
					
ajax删除

				
			

			

				

					uyhbrr的博客
				

				

					03-19
					
					159
					
				

			

		

		

			
				
function dlt(id){
  $.post(
    "delete",
    {aaa:id},
    function(obj){
     if(obj){
      alert("删除成功");
   ...

			
		

	





	

		

			

				
					
AJAX实战中文版

				
			

			

				

					12-26
				

			

		

		

			
				
通过选择、创建、修改和删除DOM元素，开发者可以动态地改变页面的显示内容，实现丰富的用户交互。  AJAX并不局限于XML数据格式，因此书中也会涉及JSON（JavaScript Object Notation）的使用。JSON因其简洁、易读的...

			
		

	





	

		

			

				
					
学生信息管理系统_PHP实战_信息管理系统

				
			

			

				

					09-10
				

			

		

		

			
				
《学生信息管理系统——PHP实战与信息管理系统的深度解析》  在信息技术日新月异的今天，学生信息管理系统作为教育领域的重要工具，对于提高学校管理效率、优化教育资源分配具有重大意义。本系统是基于PHP编程语言...

			
		

	





	

		

			

				
					
Ajax删除

				
			

			

				

					ZjL0209的博客
				

				

					06-16
					
					294
					
				

			

		

		

			
				
今天学习目标：sql选择题，3c数码商城

已掌握的目标：sql选择题 ，使用Ajax删除

明天的目标：c#开发选择题

一、使用Ajax删除

1.先添加一个a标签



2.前台代码







3.后台代码 注意：要引用BLL层


...

			
		

	





	

		

			

				
					
jquery ajax实现批量删除具体思路及代码

				
			

			

				

					10-27
				

			

		

		

			
				
回调函数，在请求完成后需要进行的操作：此处是把选中的checkbox去掉，接下来为大家详细介绍下，感兴趣的朋友可以参考下哈，希望对你有所帮助

			
		

	





	

		

			

				
					
AJAX删除

				
			

			

				

					普通还不自信的程序员
				

				

					08-05
					
					518
					
				

			

		

		

			
				
点击删除按钮，弹出确认框，点击确认删除后执行删除操作
if(confirm('确认要删除吗')){
	var id = td.find("[name=id]").val()
    $.ajax({
    	url:'delete?id='+id,
        success:function (res) {
        	if(res.ok){
        		td.parent().remove()
       	 	}else {
       	 		alert(res.messag

			
		

	





	

		

			

				
					
通过ajax实现删除

				
			

			

				

					c741418731的专栏
				

				

					03-21
					
					2306
					
				

			

		

		

			
				
1、js文件:
i3Dialogopts.submitFunc=function(){
      $.ajax({
     type : "post",
     url : '${ctx}/studentmanage/deleteArchives.do?ids='+id,
     async : false,
     dataType : "text",
     befo

			
		

	





	

		

			

				
					
通过Ajax进行删除操作

					
热门推荐

				
			

			

				

					Nishuibaichuan 的博客
				

				

					07-02
					
					1万+
					
				

			

		

		

			
				
1. jsp页面
删除

 



$(function(){
//1. 点击 delete 时, 弹出 确定是要删除 xx 的信息吗 ? 若确定, 执行删除, 若不确定, 则取消
$(".delete").click(function(){
var Name = $(this).next(":input").val();
var flag = confirm("确定要删除"

			
		

	





	

		

			

				
					
Ajax批量删除

				
			

			

				

					weixin_44123996的博客
				

				

					07-18
					
					306
					
				

			

		

		

			
				
今天老师讲了通过勾选框实现批量删除的功能，同时利用Ajax更新用户列表，而不必重新加载页面。
在IUserinfoDao.java中加上deleteAll()函数：
public void deleteAll(List<Integer> ids);

在UserMapper.xml中加上sql语句：
<delete id="deleteAll" parameterType="li...

			
		

	





	

		

			

				
					
使用Ajax进行数据删除

				
			

			

				

					SunGuangHuiM的博客
				

				

					06-16
					
					654
					
				

			

		

		

			
				
首先在窗口中添加一个删除的连接，起名为dete

创建一个一般处理程序Delete.ashx


在页面中进行Ajax调用




			
		

	





	

		

			

				
					
用Ajax删除的做法

				
			

			

				

					dianyi7318的博客
				

				

					08-24
					
					169
					
				

			

		

		

			
				
一般程序文件代码
using System;using System.Web;using System.Linq;using System.Data.Linq;
public class Shanchu : IHttpHandler {
    private MydbDataContext _Context = new MydbDataContext();    public v...

			
		

	





	

		

			

				
					
掌握jQuery实战技巧与源码解析——JavaScript学习精华

				
			

			

				

					
				

			

		

		

			
				
- **DOM操作**: 在jQuery实战中，学习如何使用jQuery对DOM进行各种操作，比如创建、添加、删除以及修改DOM元素。 - **事件处理**: 掌握如何为元素绑定事件处理函数，并处理各种内置事件（如点击、鼠标移动等）。 - *...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值