2.ajax请求实例（增、删、改、查）

最新推荐文章于 2022-08-12 16:50:39 发布

qq_36727046

最新推荐文章于 2022-08-12 16:50:39 发布

阅读量837

点赞数

本文链接：https://blog.csdn.net/qq_36727046/article/details/78003637

版权

本文详细介绍了使用AJAX进行增、删、改、查操作的实战例子，通过示例代码展示了如何在后台与前端交互，实现无刷新的数据更新。

摘要由CSDN通过智能技术生成

Rest风格的URI：

增: /emp -->post请求

删: /emp/{id} -->post转delete

改: /emp/{id} -->post转put

查: /emp/{id} -->get请求

一：新增

    
    
    
     	//为保存员工信息的按钮添加点击事件.
     		$("#add_save_emp").click(function(){
        		 
     			//alert($("#myModal form").serialize());  //打印表单信息.
     			//发送ajax请求,新增员工.
     			$.ajax({
        
     				url:"${APP_PATH}/emps",   
     				type:"POST",   
     				data:$("#myModal form").serialize(),
     				success:function(result){
        
     					
     					//后端校验.
     				    if(result.code == 200){
        
     						if(undefined != result.result.errors.empName){
        
     							//显示名字错误信息
     							add_validate("#add_emp_empName", "error", result.result.errors.empName);
     						}
     						if(undefined != result.result.errors.email){
        
     							//显示邮箱的错误信息.
     							add_validate("#add_emp_email", "error", result.result.errors.email);
     						}
     					}else{
        
     						$("#myModal").modal('hide');//隐藏模态框
     						//跳转到指定页面.
     						alert($("#col-page").attr("attr-pn"));
     					}
     					
     				}
     			}); 
     		});

二、删除

2.1：删除单一员工

     
     
     
      //为删除按钮绑定点击事件.
      		$(".delete-button").click(function(){
         
      			var id = $(this).attr("attr-id");
      			//当前标签（删除按钮）的父元素的父元素的第2个th子元素的文本内容.
      			var empName = $(this).parents("th").parents("tr").find("th:eq(1)").text();	
      			
      			//点击确定的情况下才发送ajax请求
      			if(confirm("确认要删除"+empName+"吗")){
         
      				
      				//发送ajax请求，删除数据.
      				$.ajax({
         
      					url:"${APP_PATH}/emp/"+id,
      					type:"delete",
      					success:function(result){
         
      						//alert(result.msg);
      						//...跳转到当前页
      					}				
      				});