SSM 增、删（ajax）

最新推荐文章于 2024-07-16 20:04:56 发布
最新推荐文章于 2024-07-16 20:04:56 发布
阅读量5.9k 收藏 7
点赞数 4
分类专栏： ssm 文章标签： spring mvc ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhning12L/article/details/77386951
版权

本来搭好了环境是用.jsp来完成这项工作的，奈何写好后一直无法连接数据库获取数据，折腾了一天试了各种方法都不行，最终放弃了….改用.html代替

先发下我的目录吧，仅供参考
这里写图片描述
**

springmvc配置：

使用.jsp时如下：

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
          <property name="prefix" value="/WEB-INF/" />
          <property name="suffix" value=".jsp" />
      </bean>

改为html后男票给了段代码，据说里面也有很深的坑..我就没有细究了，直接拿来用

 <bean  class="org.springframework.web.servlet.view.InternalResourceViewResolver">
              <property name="order" value="10"></property>
              <property name="prefix" value="/WEB-INF/pages/"></property>
              <property name="contentType" value="text/html"></property>
          </bean>

需要下载jquery-3.2.1.min.js并在html中导入

 <script src="/js/jquery-3.2.1.min.js"></script>

index界面代码：

id：<input type="text" name="userid" id="p1"/><br/>
    账号：<input type="text" name="username" id="p2"/><br/>
  密码：  <input type="text" name="password" id="p3"/><br/>
    <input type="submit" value="submit" id="register"/>
    <input type="submit" value="delete" id="delete"/>

controller中index的代码（也是我设置的Tomcat的默认访问路径）：

@RequestMapping(value = "/index")
    public ModelAndView index() {
        ModelAndView mav = new ModelAndView();
        mav.setViewName("index.html");//index.jsp
        return mav;
    }

下面使用ajax来传递数据，这里我用delete方式做例子

一、post方式

index.html代码：

<script>
$("#delete").click(function () {
            var jsonData={};
            jsonData.userid=$("#p1").val();
            $.ajax({
                type: "get",
                url: "/doDelete",
                dataType: 'json',
               contentType: "application/json;charset=utf-8",
                data: JSON.stringify(jsonData),
                success: function (data) {
                    if(data == -1)
                        alert("该用户不存在");
                    else
                        $(location).attr('href', 'bank');
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest.status);
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                }
            });
        });
</script>

controller代码

@RequestMapping(value = "/doDelete")
    @ResponseBody
    public Integer doDelete( @RequestBody User user) {
        Integer result;
        Integer userid=user.getUserid();
        try{
            result=userService.delete(userid);
        }catch(Exception e){
            result = -1;
        }
        System.out.println(result+" "+userid);
        return result;
    }

  • 这里有必要附上add的方法给大家做参考，因为jsonData此处为一个对象，看它获取userid调用的jsonData.userid=$("#p1").val();就可以知道。

  • 而之前ssm给的默认代码里，delete传入的是Interger，而add传入的是**对象**user，所以add中可以直接使用，而delete中需要先传入对象，再从对象中getuserid来进行接下来的操作，如果直接将传入类型定为Interger会出现数据类型不匹配的问题。

ajax

<script>
    $(document).ready(function() {

        $("#register").click(function () {
            var jsonData={};
            jsonData.username=$("#p2").val();
            jsonData.password=$("#p3").val();
            $.ajax({
                type: "post",
                url: "/doRegister",
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(jsonData),
                success: function (data) {
                    if(data == -1)
                        alert("用户名已经被注册");
                    else
                        $(location).attr('href', 'bank');
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest.status);
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                }
            });
        });
</script>

controller

@RequestMapping(value = "/doRegister",method = RequestMethod.POST)
    @ResponseBody
    public Integer doRegister(@RequestBody User user) {
       Integer result;
        try{
            result=userService.add(user);
        }catch(Exception e){
            result = -1;
        }
        return result;
    }

二、GET方式

真的没写过get方式啊啊啊啊啊啊，上网查大家也都是用的post啊啊啊啊啊，此处艰辛难以言表，又用了半天的时间才写出来……据男票大大说采用的是restful的（风格？）反正我又发挥了我的观察和模仿能力【微笑】，最后男票大大亲临才给我讲明白的…

ajax：

 $("#delete").click(function () {

            $.ajax({
                url: "/deDelete/"+$("#p1").val(),
                method : "get" ,
                data : {                },
                dataType : "json",
                success : function(data){
                    if(data == -1)
                        alert("该用户不存在");
                    else
                        $(location).attr('href', 'bank');
                },
                error : function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest.status);
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                }
            })
        });

controller：

@RequestMapping(value="/deDelete/{userid}",method=RequestMethod.GET,produces="application/json;charset=UTF-8")
    public @ResponseBody Integer doDelete(@PathVariable("userid") Integer userid){
        Integer result;
        try{
            result=userService.delete(userid);
        }catch(Exception e){
            result = -1;
        }
        System.out.println(result+" "+userid);
        return result;
    }

这里要注意get方式url的书写方式，因为需要在url中显示获取的信息所以不需要像post那样用变量来获取userid了，直接写在url后面就可以了，注意是附在引号外面的。我卡在这里主要是基础不扎实的缘故…get和post一直混乱分不清。

然后就是要注意url和controller中value值的对应

以及@PathVariable("userid")，这里与post区别较大

其实到现在很多注解我都是知其然不知其所以然…基本也是模仿着别人写的，自己写代码的时间太少了所以经验不足，以后要多加努力哦~~不管怎么说到现在进步都很多了。

最后附上ssm增加、删除两份的完整代码

访问index.html，输入数据，选择注册或者删除，然后跳转到bank.html界面显示数据库中的所有用户数据

controller：

@Controller
@RequestMapping("")
public class DemoAction {

    private UserService userService;

    @Autowired
    public void setUserService(UserService userService) {
        this.userService = userService;
    }

//doregister
    @RequestMapping(value = "/doRegister",method = RequestMethod.POST)
    @ResponseBody
    public Integer doRegister(@RequestBody User user) {
       Integer result;
        try{
            result=userService.add(user);
        }catch(Exception e){
            result = -1;
        }
        return result;
    }

    //doDelete
   /* @RequestMapping(value = "/doDelete")
    @ResponseBody
    public Integer doDelete( @RequestBody User user) {
        Integer result;
        Integer userid=user.getUserid();
        try{
            result=userService.delete(userid);
        }catch(Exception e){
            result = -1;
        }
        System.out.println(result+" "+userid);
        return result;
    }*/

    @RequestMapping(value="/deDelete/{userid}",method=RequestMethod.GET,produces="application/json;charset=UTF-8")
    public @ResponseBody Integer doDelete(@PathVariable("userid") Integer userid){
        Integer result;
        try{
            result=userService.delete(userid);
        }catch(Exception e){
            result = -1;
        }
        System.out.println(result+" "+userid);
        return result;
    }

    //out
    @RequestMapping(value = "/out",method = RequestMethod.POST)
    @ResponseBody
    public List<User>  out() {
        List<User> us=new ArrayList<User>() ;
        us=userService.list();
        return us;
    }
    //http://localhost/index
    @RequestMapping(value = "/index")
    public ModelAndView index() {
        ModelAndView mav = new ModelAndView();
        mav.setViewName("index.html");//index.jsp
        return mav;
    }

    //http://localhost/bank
    @RequestMapping(value = "/bank")
    public ModelAndView bank() {
       ModelAndView mav = new ModelAndView();
        mav.setViewName("bank.html");//bank.jsp
        return mav;
    }

}

index.html：

<!DOCTYPE html>
<!-- saved from url=(0098)http://www.17sucai.com/preview/501914/2017-05-17/p2p%E6%89%8B%E6%9C%BA%E5%85%A8%E7%AB%99/info.html -->
<html>
<head>
    <script src="/js/jquery-3.2.1.min.js"></script>
</head>

<body>

  id：<input type="text" name="userid" id="p1"/><br/>
    账号：<input type="text" name="username" id="p2"/><br/>
  密码：  <input type="text" name="password" id="p3"/><br/>
    <input type="submit" value="submit" id="register"/>
    <input type="submit" value="delete" id="delete"/>


<script>
    $(document).ready(function() {

        $("#register").click(function () {
            var jsonData={};
            jsonData.username=$("#p2").val();
            jsonData.password=$("#p3").val();
            $.ajax({
                type: "post",
                url: "/doRegister",
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(jsonData),
                success: function (data) {
                    if(data == -1)
                        alert("用户名已经被注册");
                    else
                        $(location).attr('href', 'bank');
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest.status);
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                }
            });
        });

        /* $("#delete").click(function () {
            var jsonData={};
            jsonData.userid=$("#p1").val();
            $.ajax({
                type: "get",
                url: "/doDelete",
                dataType: 'json',
               contentType: "application/json;charset=utf-8",
                data: JSON.stringify(jsonData),
                success: function (data) {
                    if(data == -1)
                        alert("该用户不存在");
                    else
                        $(location).attr('href', 'bank');
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest.status);
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                }
            });
        });
         */
       $("#delete").click(function () {

            $.ajax({
                url: "/deDelete/"+$("#p1").val(),
                method : "get" ,
                data : {                },
                dataType : "json",
                success : function(data){
                    if(data == -1)
                        alert("该用户不存在");
                    else
                        $(location).attr('href', 'bank');
                },
                error : function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest.status);
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                }
            })
        });
    });
</script>
</body>
</html>

bank.html：

<!DOCTYPE html>
<!-- saved from url=(0098)http://www.17sucai.com/preview/501914/2017-05-17/p2p%E6%89%8B%E6%9C%BA%E5%85%A8%E7%AB%99/info.html -->
<html>
<head>
    <script src="/js/jquery-3.2.1.min.js"></script>
</head>

<body>

  id：<input type="text" name="userid" id="p1"/><br/>
    账号：<input type="text" name="username" id="p2"/><br/>
  密码：  <input type="text" name="password" id="p3"/><br/>
    <input type="submit" value="submit" id="register"/>
    <input type="submit" value="delete" id="delete"/>


<script>
    $(document).ready(function() {

        $("#register").click(function () {
            var jsonData={};
            jsonData.username=$("#p2").val();
            jsonData.password=$("#p3").val();
            $.ajax({
                type: "post",
                url: "/doRegister",
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(jsonData),
                success: function (data) {
                    if(data == -1)
                        alert("用户名已经被注册");
                    else
                        $(location).attr('href', 'bank');
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest.status);
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                }
            });
        });

        /* $("#delete").click(function () {
            var jsonData={};
            jsonData.userid=$("#p1").val();
            $.ajax({
                type: "get",
                url: "/doDelete",
                dataType: 'json',
               contentType: "application/json;charset=utf-8",
                data: JSON.stringify(jsonData),
                success: function (data) {
                    if(data == -1)
                        alert("该用户不存在");
                    else
                        $(location).attr('href', 'bank');
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest.status);
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                }
            });
        });
         */
       $("#delete").click(function () {

            $.ajax({
                url: "/deDelete/"+$("#p1").val(),
                method : "get" ,
                data : {                },
                dataType : "json",
                success : function(data){
                    if(data == -1)
                        alert("该用户不存在");
                    else
                        $(location).attr('href', 'bank');
                },
                error : function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest.status);
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                }
            })
        });
    });
</script>
</body>
</html>

userSevice：

@Service
public class UserService {

    private UserMapper userMapper;

    @Autowired
    public void setUserMapper(UserMapper userMapper) {
        this.userMapper = userMapper;
    }

    public List<User> list(){
        return userMapper.list();
    }

   public Integer add(User user){
       return userMapper.insert(user);
   }

    public Integer delete(Integer userid){
        return userMapper.deleteByPrimaryKey(userid);
    }
}

mapper和user我就不写了..太简单了

以上是这三天的痛苦挣扎结果…虽然很简单的东西但是因为没有基础做起来还是真的很辛苦的，遇到了无数个报错，真的是有时候都要放弃了…
至少写完后整个流程终于清楚多了…可喜可贺= =干巴爹~~

沐婉清
关注
专栏目录
html+ajax+ssm写的增删改查
04-02
通过父子页面来实现：增删改查，子页面通过文本框，来获取父页面的数据，不过网页特别的简陋。
Day28SSM之CRUD开发版本2的部门增删改查
翁老师的教学团队
10-19 1367
复制工程 复制ssm02_CRUD 成ssm03_CRUD_ajax 修改 id name 增加 模块标签 Controller方法返回值类型Object （1）Controller方法返回类型可以有几种？ ModelAndView void String Object （2）@ResponseBody 调jackson库将Object转成json字符串返回 如果没有依赖jackson库则，抛出异常 HttpMessageNotWritableException: No converter found f
ssm整合 ，ajax json请求406
最新发布
tudehen的博客
07-16 278
Ajax java数据转json，ssm整合
基于SSM框架的增删改查Ajax分页模糊查询（有Mysql数据库）
06-26
新闻和对新闻的评论的增删改差
SSM框架增删改查和分页,ajax数据传导
08-25
简单实用SSM框架基础增删改查分页
ssm框架简单整合增删改查+jq,ajax下拉框+二级省市联动
05-18
纯净SSM简单整合，数据库资源根据实体类自己创建。内有ssm增删改查，ajax结合jquery做下拉框，省市联动，多选框等。所有jar包都放在lib里，搭好数据库完美可用。供新手学习。
ssm.zip_ssm+bootstrap_ssm增删改查
09-21
在这个"ssm+bootstrap_ssm增删改查"项目中，开发者很可能会利用Bootstrap的表格组件展示数据，用其表单组件进行用户输入，通过Ajax异步请求与后端SSM框架进行交互，实现无刷新的增删改查功能。例如，添加新数据时，...
Demo.rar_KHR_ssm_ssm增删改查_ssm学生管理
09-23
这个名为"Demo.rar_KHR_ssm_ssm增删改查_ssm学生管理"的压缩包文件提供了一个学生管理系统，它基于SSM框架实现了学生、班级、课程和年级的基本数据操作，即增（Add）、删（Delete）、改（Modify）和查（Query）功能...
SSM增删改查
10-19
本系统“SSM增删改查”利用这三个框架实现了基本的数据操作功能，包括添加（Add）、删除（Delete）、修改（Update）和查询（Query）。下面将详细解释这三个框架及其在Web开发中的应用。 **Spring框架**是Java企业级...
ajax与ssm
weixin_45750514的博客
10-08 143
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> div{ ...
SSM框架用Ajax增删改查一个页面（简单易懂）
passerby的博客
07-11 1018
async: false是ajax中的一个参数，它表示是否异步执行请求。当async为false时，请求将会同步执行，即在请求完成之前，浏览器将会被锁定，用户无法进行其他操作。这种方式一般不推荐使用，因为会影响用户体验。而当async为true时，请求将会异步执行，即在请求过程中，浏览器不会被锁定，用户可以进行其他操作。这种方式更加常用，因为可以提高页面的响应速度和用户体验。 3.3，属性display:none Ajax不切换页面，所有内容在一个页面，只需要通过style的属性display，将值设置
ssm-crud 用ssm+bootstrap+ajax实现增删改查
04-29
配套视频可在腾讯课堂免费观看，尚硅谷ssm整合
基于ssm使用ajax实现批量删除-附件资源
03-05
基于ssm使用ajax实现批量删除-附件资源
ssm+ajax使用于学习ajax的新手案例
03-31
ssm+ajax新手适用 验证用户名是否存在 可以参照这个demo
Spring mvc+Ajax用户登录增删改查功能
09-24
用户登录增删改查的小项目，但包括前台界面设计，js，jQuery,ajax调后台，获取返回结果在前台界面用JS代码中处理，轻量实用适合新手入门项目开发。
基于ssm使用ajax实现批量删除
qq_40718312的博客
07-18 1026
此次批量删除是在上一篇博客上进行功能的添加，详情请看：https://blog.csdn.net/qq_40718312/article/details/96310016 &nbsp&nbsp在上一次中，实现了权限登录，这次运用ajax实现批量删除。我们知道AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），其最...
Day9：SSM框架Ajax批量删除
__Zhou__的博客
07-18 246
通过Ajax实现用户的批量删除。 jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %> <%@taglib uri="http://java.sun.com/jsp/jstl/core" pre...
SSM框架+ajax实现批量删除
L_Sisu的博客
11-28 422
SSM+ajax实现批量删除 mapper <!-- 批量删除 --> <delete id="batchdel" parameterType="string"> delete from t_city where id in <foreach collection="array" item="id" open="(" sep...
ssm+ajax实现新增和修改(layerui后台系统模板)
qq_38337245的博客
12-07 3328
最近使用layerui后台模板实现的一个新增和修改，大家looklook、、、、、 一、jsp页面 admin_list.jsp页面，该页面显示数据（代码太多了，我就只写一部分就行了）  添加：onclick="addAdmin()" ，调用admin.js中的函数 &lt;a title="添加" href="javascript:;" onclick="addAdmin()" ...
ssm框架ajax增删改查
07-11
SSM框架是指Spring + SpringMVC + MyBatis框架的组合，可以用来构建Java Web应用程序。下面是一个简单的示例，演示如何使用SSM框架进行AJAX增删改查操作。 首先，确保你已经配置好了SSM框架，并且创建了相应的实体类和数据库表。 1. AJAX查询操作： 在前端页面中，使用AJAX发送一个GET请求到后端的Controller，然后由Controller调用Service层的方法，最终返回查询结果。 前端代码： ```javascript $.ajax({ url: "/yourControllerName/query", type: "GET", success: function(data) { // 处理查询结果 } }); ``` 后端代码： ```java @Controller @RequestMapping("/yourControllerName") public class YourControllerName { @Autowired private YourServiceName yourServiceName; @RequestMapping("/query") @ResponseBody public List<YourEntityName> query() { List<YourEntityName> list = yourServiceName.query(); // 调用Service层的查询方法 return list; } } ``` 2. AJAX新增操作： 在前端页面中，使用AJAX发送一个POST请求到后端的Controller，然后由Controller调用Service层的方法，最终返回新增结果。 前端代码： ```javascript $.ajax({ url: "/yourControllerName/add", type: "POST", data: JSON.stringify(yourData), // 要新增的数据 contentType: "application/json", success: function(data) { // 处理新增结果 } }); ``` 后端代码： ```java @Controller @RequestMapping("/yourControllerName") public class YourControllerName { @Autowired private YourServiceName yourServiceName; @RequestMapping(value = "/add", method = RequestMethod.POST) @ResponseBody public String add(@RequestBody YourEntityName yourEntityName) { yourServiceName.add(yourEntityName); // 调用Service层的新增方法 return "success"; } } ``` 3. AJAX修改操作和删除操作的示例与新增操作类似，只需要在后端Controller中定义对应的RequestMapping和调用对应的Service层方法即可。 以上是一个简单的示例，实际的实现可能因具体需求而有所不同。希望对你有帮助！如果有任何问题，请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值