ajax全套增删改附代码

最新推荐文章于 2024-08-14 21:03:30 发布

Zxf �

最新推荐文章于 2024-08-14 21:03:30 发布

阅读量277

点赞数

文章标签： ajax

本文链接：https://blog.youkuaiyun.com/weixin_43842188/article/details/107916627

版权

$(function(){
    getPage();
})


function getPage(){

    $.ajax({
                    type: "POST", //提交方式
                    url:"/T_branch3/stujkaction!staList.action", //提交路径
                    data:$("#staff_list_from").serialize(),
                    success : function(data) {//成功回调函数
                    //整个页面的html代码
                    $("#ygDiv").html(data)
                    $("#ygDiv").show()
                       },
                    error : function (data) {//错误回调函数
                           alert(data);
                        alert("系统错误，请联系管理员！");
                      },
                })
}

//添加跳转
function staadd(){
//清空函数
           $("#ao").val("");
           $("input[name='sta.ssex']:checked").attr("checked",false);
           $("#co").val("");
           $("#ek").val("");
           $("#pathFile").val("");
           $("#lo").val("");
           $("input[name='sta.slikes']:checked").attr("checked",false);
    //隐藏       
 $("#staAdd").show();
 $("#ygDiv").hide();
 $("#staad").hide();
}
//添加
function addsta(){


     uploadFile()
     var a="";
        $("input[name='sta.slikes']:checked").each(function(){
            a+=$(this).val()+",";
        })
        a=a.substring(0,a.length-1)
 $.ajax({
                  type:"POST", //提交方式
                  url :"/T_branch3/stujkaction!addsta.action", //提交路径
                  data:{"sta.sname":$("#ao").val(),
                        "sta.ssex":$("input[name='sta.ssex']:checked").val(),
                        "sta.ssdir":$("#co").val(),
                        "sta.sbid":$("#ek").val(),
                        "sta.simg":$("#pathFile").val(),
                         "sta.sremark":$("#lo").val(),
                         "sta.slikes":a,
                         },     
                  success : function(data) {//成功回调函数

                          location.reload();
                  },
                    error : function (data) {//错误回调函数
                          alert("系统错误，请联系管理员！");
                        }  
                      });

   }

   //修改提值
function updatesta(text){

 $("#staad").hide();
 $("#staAdd").hide();
 $("#ygDiv").hide();
 $("#updatesta").show();
  $.ajax({
                  type : "POST", //提交方式
                  url :"/T_branch3/stujkaction!updatesta.action", //提交路径
                  data:{"sta.sid":text},
                  dataType:"json",     
                  success : function(data) {//成功回调函数

                      $("#al").val(data.sid);
                      $("#ab").val(data.sname);
                      $("input[name='sta.ssex'][value='"+data.ssex+"']").attr("checked",true);
                      $("#ad").val(data.createDateStr);
                      $("#op").val(data.sbid);
                      $("textarea[name='sta.sremark']").val(data.sremark);
                      for(var i=0;i<data.arrlikes.length;    i++){
                              $("input[name='sta.slikes'][value='"+data.arrlikes[i]+"']").attr("checked",true)
                        };
                      $("#zspath").attr("src","/T_branch3/upload/"+data.simg);
                      $("#pathFileup").val(data.simg);

                       },

                    error : function (data) {//错误回调函数

                          alert("系统错误，请联系管理员！");
                        }  
                      });

              }
        //修改    
    function updatectsta(){
    var a="";
        $("input[name='sta.slikes']:checked").each(function(){
            a+=$(this).val()+",";
        })
        a=a.substring(0,a.length-1)
    //  uploadFileup()

    $.ajax({
        type:"post",
        url:"/T_branch3/stujkaction!updatectsta.action" ,
        data:{"sta.sid":$("#al").val(),
              "sta.sname":$("#ab").val(),
              "sta.ssex":$("input[name='sta.ssex']:checked").val(),
              "sta.sdir":$("#ad").val(),
              "sta.sbid":$("#op").val(),
              "sta.simg":$("#pathFileup").val(),
              "sta.slikes":a,
              "sta.sremark":$("#lh").val(),
             },
        success: function(data){
            // $("#pathFileup").val("");
             $("input[name='sta.slikes']:checked").attr("checked",false);
            alert("修改成功");

        location.reload();
        },
        error: function(data){
           alert("系统错误，请联系管理员！");
        }
    });


 }
    //删除
     function datectsta(text){

  $.ajax({
                  type : "POST", //提交方式
                  url :"/T_branch3/stujkaction!datectsta.action", //提交路径
                  data:{"sta.sid":text},     
                  success : function(data) {//成功回调函数
                   alert(data);
                   $("#ygDiv").show();
                   location.reload();

                  },
                    error : function (data) {//错误回调函数
                     alert(data);
                          alert("系统错误，请联系管理员！");
                        }  
                      });
                      }

    //头像上传
     function  uploadFile(){
       $.ajaxFileUpload({
                 url:"/T_branch3/stujkaction!fileUpload.action", //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'imgFile', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                    $("#imgShow").attr("src","/T_branch3/upload/"+data.url)
                    $("#pathFile").val(data.url)    
                         //图片的路径
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                }
            )
 }
          //修改上传         
     function  uploadFileup(){
       $.ajaxFileUpload({
                 url:"/T_branch3/stujkaction!fileUpload.action", //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'imgFileup', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                    $("#zspath").attr("src","/T_branch3/upload/"+data.url)
                    $("#pathFileup").val(data.url)    
                         //图片的路径
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                }
            )
 }    


JsP:


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'Yglist.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
     <script type="text/javascript" src="js/jquery-1.7.js"></script>
     <script type="text/javascript" src="js/stu/stuff.js"></script>
     <script type="text/javascript" src="js/jquery/ajaxfileupload.js"></script>
     <script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
     <script type="text/javascript" src="<%=request.getContextPath()%>/autocomplete/jquery.ui.autocomplete.js"></script>
     <link rel="stylesheet" href="<%=request.getContextPath()%>/autocomplete/jquery.autocomplete.css" type="text/css"></link>

     </head>

  <body>
  <a href="javascript:staadd()" id="staad">添加</a>
  <div  style="display: none" id="staAdd"> 

         学生名：<input type="text" name="sta.sname" id="ao"><br><br>
               <input type="hidden" id="pathFile" name="sta.simg">
               <img id="imgShow">
         学生头像 <input type="file" id="imgFile" name="img">
                 <input type="button" value="预览" onclick="uploadFile()"><br>
        学生性别:<input type="radio"  name="sta.ssex" value="0" />男
               <input  type="radio"   name="sta.ssex" value="1" />女<br><br>
                  爱好：<input type="checkbox" name="sta.slikes" value="1" >篮球
                <input type="checkbox" name="sta.slikes" value="2">乒乓球
                <input type="checkbox" name="sta.slikes" value="3">足球
                <input type="checkbox" name="sta.slikes" value="4">排球
                <input type="checkbox" name="sta.slikes" value="5">羽毛球
                    <br/>
         学生生日：<input type="text" name="sta.sdir" id="co" onclick="WdatePicker()"><br><br>


        学生备注：<!--  <input type="text" name="sta.sremark" id="lo"><br><br>-->
              <textarea rows="5" cols="20" name="sta.sremark" id="lo"></textarea>

         上级部门:
             <select name="sta.sbid" id="ek">
             <c:forEach items="${list}" var="li">
             <option  value="${li.bid}">${li.bname}</option>
             </c:forEach>
             </select> 


  <input type="button" value="提交" onclick="addsta()">

   </div>
         <div  style="display: none" id="updatesta"> 
         <input type="hidden" name="sta.sid" id="al">
          员工名：<input type="text" name="sta.sname"id="ab"><br><br>
          性别：<input name="sta.ssex" type="radio" value="0"<c:if test="${sta.ssex eq '0'}" >checked="checked"</c:if>>男
            <input name="sta.ssex" value="1" type="radio" <c:if test="${sta.ssex eq '1'}">checked="checked"</c:if>>女<br><br>
          <td>爱好：<input name="sta.slikes" type="checkbox" value='1'
                        <c:forEach items="${sta.likeArr}" var="li">
                                    <c:if test="${li eq 1}"> checked='checked' </c:if>
                            </c:forEach> 
                    >篮球
    <input name="sta.slikes" type="checkbox" value='2' <c:forEach items="${sta.likeArr}" var="li"><c:if test="${li eq 2}"> checked='checked' </c:if></c:forEach>>乒乓球
    <input name="sta.slikes" type="checkbox" value='3' <c:forEach items="${sta.likeArr}" var="li"><c:if test="${li eq 3}"> checked='checked' </c:if></c:forEach>>足球                
    <input name="sta.slikes" type="checkbox" value='4' <c:forEach items="${sta.likeArr}" var="li"><c:if test="${li eq 4}"> checked='checked' </c:if></c:forEach>>排球                
    <input name="sta.slikes" type="checkbox" value='5' <c:forEach items="${sta.likeArr}" var="li"><c:if test="${li eq 5}"> checked='checked' </c:if></c:forEach>>羽毛球                
                    </td>
          生日：<input type="text" name="sta.sdir"   id="ad" onclick="WdatePicker()"><br><br>
          部门：<select name="sta.sbid" id="op">
               <c:forEach items="${list}" var="li">
               <option  value="${li.bid}"<c:if test="${sta.sbid eq li.bid}">selected="selected"</c:if>>${li.bname}</option>
               </c:forEach>
               </select> 

       学生备注：   
              <textarea rows="5" cols="20" name="sta.sremark" id="lh"></textarea>

        员工头像：<img src="" width="100" height="100" id="zspath"/>
              <input type="hidden" id="pathFileup" name="sta.simg">

        重新上传 <input type="file" id="imgFileup" name="img">
                <input type="button" value="预览" onclick="uploadFileup()"><br>
  <input type="button" value="提交" onclick="updatectsta()">
  </div>

 <div id="ygDiv">这是员工展示页面List

 </div>
</body>
</html>