ajax全套 增删改附代码

最新推荐文章于 2022-08-29 15:25:22 发布
最新推荐文章于 2022-08-29 15:25:22 发布
阅读量248 收藏
点赞数
文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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>
Zxf �
关注
AJAX实现增删改查
zhanglijie__1的博客
10-08 889
实例介绍 1.做一个网页，可以进行数据的增删改查的为佳 2.用pycharm工具建flask框架 3.按照MVC标准进行ajax前后端分离的代码 4.运行实现 代码分析 因为是MVC模式，所以有个dao包，有个controller包，有个service包，然后因为有些类需要重复使用，所以有个封装类的文件，在entity包里，pycharm中Flask框架生成的app文件，动态前端页面存在tem...
黑马2021最新版 SpringCloud基础篇全技术栈导学（RabbitMQ+Docker+Redis+搜索+分布式）
m0_67402026的博客
07-30 1618
也是使用的Ribbon，下面一个例子将Nacos配置成同集群优先的负载均衡策略默认的并不能实现根据同集群优先来实现负载均衡。Nacos中提供了一个NacosRule的实现，可以优先从同集群中挑选实例。1）给order-service配置集群信息springcloudnacoslocalhost8848discoveryHZ#集群名称2）修改负载均衡规则ribboncom.alibaba.cloud.nacos.ribbon.NacosRule#负载均衡规则。...
增删改查的Ajax
weixin_44385767的博客
03-26 500
用Ajax实现增删改查 jsp页面 controller控制层代码 Dao层方法 sql语句 如果有错请读者们及时反馈，本小编会一一改正的，我发的都是一些java初级代码，希望新手程序猿们能够更快的学习 ...
Ajax-增删改查实现
qq_38486484的博客
01-03 7938
一、Ajax-查询全部 &amp;amp;amp;lt;script type=&amp;amp;quot;text/javascript&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;/script&amp;amp;amp;gt; 二、Ajax-条件查询 三、Ajax-删除 四、Ajax-修改 五、Ajax-新增
ajax实现增删查改
qq_57104988的博客
08-29 2024
【代码】ajax实现增删查改。
ajax+jquery增删改査
qq_60555957的博客
08-15 422
ajax+jQuery小案例
人工智能-项目实践-网站设计-基于JSP+Servlet+Jdbc宅商城购物网站设计毕业源码案例设计.zip
最新发布
01-04
在项目中，JDBC用于连接数据库，执行SQL查询，如获取商品数据、用户信息、订单状态等，以及对数据库的增删改操作。 4. **MVC (Model-View-Controller)架构**：这是一个常见的软件设计模式，常用于Web开发。在这个...
老男孩22期python视频_老男孩Ptython全栈架构师视频教程 Python最新整理完整版22期视频教程 超60G课程容量...
weixin_39874196的博客
12-21 339
day01 Python的简介 环境安装 变量 数据类型等 4月27日 周六day02 While循环等 4月28日 周天day03 数据类型 for循环 4月29日 周一day04 列表 数组等 4月30日 周二day04.5 — day05 5月1日—5月4日为劳动节和青年节放假4天不讲课 此文件内无内容仅做说明使用day05 字典 5月5日 周天day06 代码块 缓存机制 集合 深浅COP...
JAVA开源项目大全
SunnyMoon（月下泉声）博客空间 (此博客已废弃，新博客地址：http://sunnymoon.javaeye.com/)
08-12 3731
Spring Framework  【Java开源 J2EE框架】Spring 是一个解决了许多在J2EE开发中常见的问题的强大框架。 Spring提供了管理业务对象的一致方法并且鼓励了注入对接口编程而不是对类编程的良好习惯。Spring的架构基础是基于使用JavaBean属性的 Inversion of Control容器。然而，这仅仅是完整图景中的一部分：Spring在使用Io
Java简历与面试
m0_67402013的博客
07-30 151
本系统是X委托Y开发的用于Z的系统，系统包括A、B、C、D等模块。系统使用了Java企业级开发的开源框架E以及前端技术F。表示层运用了G架构，使用H作为视图I作为控制器并实现了REST风格的请求；业务逻辑层运用了J模式，并通过K实现事务、日志和安全性等功能，通过L实现缓存服务；持久层使用了M封装CRUD操作，底层使用N实现数据存取。整个项目采用了P开发模型。**说明**上面的描述中，E通常指Spring（Java企业级开发的一站式选择）；...
基于Javaweb中用Ajax做的增删改查
07-30
基于Javaweb中用Ajax做的一个小型增删改查，有连接到SQL Server数据库
随记（ajax效果的增删改查）
10-16
新人一枚，网上搜了很多关于ajax增删改查的例子，都不是自己要的效果，自己写的，虽然花了点时间，并且很基础，但是增删改查还是全的。希望可以帮到您哦。这个是我自己没有休整过的，注释较白话，大神什么的勿喷。
Ajax实现增删改查的demo
04-01
Ajax实现增删改查的demo
Jquery Ajax动态增删改查
10-10
Jquery Ajax动态增删改查，Jquery Ajax
AJAX的增删改
03-28
NULL 博文链接：https://aazham.iteye.com/blog/1260712
Ajax全套增删改查：
weixin_43666859的博客
11-29 4788
Ajax全套增删改查： 下面的代码是写在zhanghao_create.js文件中的，然后在zhanghao_create.jsp页面中使用script标签将该js文件引入即可。 $(function(){ //这是JQuery中的页面加载函数 // 点击下拉菜单，就会进行查询身份下拉菜单 $.ajax({ url:&quot;/Pro_StudentMS/servlet/Accoun...
jQuery实例--Ajax信息的增删改查等操作
热门推荐
周梦康的代码碎片
01-24 1万+
jQuery实例 $(function(){ //调用加载数据函数 loadstu(); //为添加按钮绑定一个添加动作 $("#aid").click(function(){ $("#fill").show(); $("#myform").show(); }); });
jquery与ajax实现增删改查
qq_45030966的博客
09-14 6553
jquery与ajax实现增删改查 对于本项目，jquery与ajax实现当前页面的增删改查 jquery获取当前页面的数据，ajax与后台接口进行连接，将后台数据返回到前端，将前端数据送回后台 准备操作： 1.将项目上传到云服务器上，并且通过 java -jar xxx.jar命令行运行当前jar包。运行成功后，打开http://ip:端口号/swagger-ui.html页面查看接口。 2.连接云服务器数据库 新建数据库，xxtx,将sql文件导入进来。导入成功之后，给当前云服务器的数据库创建用户名
AJAX做增删改查详细！
weixin_30530939的博客
04-27 436
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
ajax mybatis增删改模糊查询，分页
07-15
对于使用Ajax和MyBatis进行增删改模糊查询和分页的操作，你可以按照以下步骤进行： 1. 建立后端接口：首先，在你的后端框架（如Spring MVC）中，建立相应的Controller来处理前端发送的请求。在Controller中，你可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值