springmvc ajax实现添加数据 （上一篇的基础上）

最新推荐文章于 2021-08-05 20:05:04 发布
最新推荐文章于 2021-08-05 20:05:04 发布
阅读量858 收藏 1
点赞数 1
分类专栏： Eclipse Spring mvc ajax 文章标签： spring springmvc ajax java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/handsome221/article/details/83059312
版权
Spring mvc 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
Eclipse
5 篇文章 0 订阅
订阅专栏
ajax
2 篇文章 0 订阅
订阅专栏

一、把testajax.jsp修改成如下:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="/springmvc/resources/css/css.css"  rel="stylesheet">
<script type="text/javascript" src="/springmvc/resources/js/jquery-1.8.3.js"></script>

<script type="text/javascript">
var index=10000;//初始，用于演示，没有连接数据库。
$(function(){
    
    
    $.ajax({
        type:"post",
        url:"/springmvc/test/testjson",
        datatype:"json",
        success:function(data){
            for(var i=0;i<data.length;i++)
            {
            
            var tr=$("<tr id=del"+data[i].uid+"></tr>");
            var td1=$("<td>"+data[i].uid+"</td>");
            var td2=$("<td>"+data[i].uname+"</td>");
            var td3=$("<td>"+data[i].upwd+"</td>");
            var td4=$("<td><a href='javascript:del("+data[i].uid+")'>删除</a></td>");
            tr.append(td1);
            tr.append(td2);
            tr.append(td3);
            tr.append(td4);
            $("#table").append(tr);
            console.log($("#table").html());
            
            }
            
        }
        
    });
});

function del(id)
{
    console.log(id);
    $("#table #del"+id).remove();
}

function insert()
{
    
    var tr=$("<tr id=del"+index+"></tr>");
    var td1=$("<td>"+index+"</td>");
    var td2=$("<td>李砷</td>");
    var td3=$("<td>123456</td>");
    var td4=$("<td><a href='javascript:del("+index+")'>删除</a></td>");
    tr.append(td1);
    tr.append(td2);
    tr.append(td3);
    tr.append(td4);
    $("#table").append(tr);
    index++;
}
function select()
{
    $.post("/springmvc/test/testjson",function(data){
        for(var i=0;i<data.length;i++)
            {
            
            var tr=$("<tr></tr>");
            var td1=$("<td>"+data[i].uid+"</td>");
            var td2=$("<td>"+data[i].uname+"</td>");
            var td3=$("<td>"+data[i].upwd+"</td>");
            tr.append(td1);
            tr.append(td2);
            tr.append(td3);
            $("#table").append(tr);
        
            
            }
        
        
    },"json")    
}

</script>
</head>
<body>
<a href="javascript:insert()">添加</a>
<table id="table" class="cssTable">
<tr>
    <td>编号1</td>
    <td>姓名</td>
    <td>密码</td>
</tr>
</table>
</body>
</html>

结果如下:

点击添加的结果：

 

修改同理！

 

飘2018
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
springMVC使用Ajax请求数据
08-10
使用Ajax从页面向控制层请求数据，并将提交的数据再次返回，国外网站下载代码，很有参考意义。请使用Eclipse工具
SpringMVC+Jquery实现Ajax功能
10-16
SpringMVC：是基于Spring的一个子框架(MVC框架)，功能强于Spring，这个框架主要是解决咱们Controller这一层的问题。这篇文章主要介绍了SpringMVC+Jquery实现Ajax功能,需要的朋友可以参考下
SpringMVC实现动态加表及字段并显示数据
04-10
SpringMVC实现动态加表及字段并显示数据
Springmvc_注解方式+批量增加数据库+ajax异步请求【图解】.png
03-11
Springmvc_注解方式+批量增加数据库+ajax异步请求【图解】.png
SpringMVC环境下实现的Ajax异步请求JSON格式数据
01-19
一 环境搭建 首先是常规的spring mvc环境搭建，不用多说，需要注意的是，这里需要引入jackson相关jar包，然后在spring配置文件“springmvc-servlet.xml”中添加json解析相关配置，我这里的完整代码如下： <?xml version=1.0 encoding=UTF-8?> <beans xmlns=http://www.springframework.org/schema/beans xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance xmlns:context=http://www
springmvc中ajax,springMVC中ajax的使用
weixin_39696197的博客
08-05 388
springMVC中使用ajax有两种方法，第一种是根据servletAPI来使用ajax，第二种是根据springMVC给我们提供的API来使用。一.根据servletAPI：springMVC配置文件如下：具体controller如下：@RequestMapping("/ajax.do")public void ajax(HttpServletRequest req,HttpServletRe...
SpringMVC中使用Ajax（带效果图）
weixin_45802810的博客
07-20 1506
Ajax介绍 Ajax即异步的 JavaScript 和 XML，是一种无需重新加载整个网页的情况下，能够更新部分模块的网页技术。使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。 Ajax应用场景 注册时，输入用户名自动检测用户是否已经存在； 登陆时，提示用户名密码错误； 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除…… Ajax工具类 Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向
SpringMVC使用ajax详细实现MySQL数据库的增删查改功能
陌意随影的博客
08-07 1311
1.本次项目基于maven管理项目，采用SpringMVC框架，使用c3p0数据连接池以及MySQL数据库进行项目。 2.项目的创建： 首先创建一个maven工程： 对项目的Tomcat进行配置： 3.在pom.xml中引入项目的依赖文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001
ajax批量录入,springmvc+mybatis+ajax 批量插入数据
weixin_35917193的博客
08-05 176
搜索热词下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。varmids=newArray();for(vari=0;imids.push(rows[i].id);}$.ajax({type:'POST',dataType:"json",async:false,traditional:true,/...
$.ajax()方法详解
09-17 308
$.ajax()方法详解 jquery中的ajax方法参数总是记不住，这里记录一下。 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方...
Spring mvc+Ajax用户登录增删改查功能
09-24
用户登录增删改查的小项目，但包括前台界面设计，js，jQuery,ajax调后台，获取返回结果在前台界面用JS代码中处理，轻量实用适合新手入门项目开发。
SpringMVC框架下使用jQueryAJAX进行数据交互
11-24
SpringMVC框架下使用jQueryAJAX进行数据交互的一个DEMO http://blog.csdn.net/lazyrabbitlll/article/details/78615309
SpringMVC与Ajax交互需要的三个包
09-16
jackson-annotations-2.9.6.jar，jackson-core-2.9.6.jar，jackson-databind-2.9.6.jar
Springmvc和ajax如何实现前后端交互
08-19
Springmvc和ajax实现前后端交互的技术要点 在软件开发中，前后端交互是非常重要的一环，特别是在Web应用中。 Springmvc和ajax是实现前后端交互的两个常用的技术，今天我们就来详细介绍如何使用Springmvc和ajax实现...
springmvc+mybatis+ajax 批量插入数据
weixin_33778544的博客
11-06 126
2019独角兽企业重金招聘Python工程师标准>>> ...
Springboot+Jpa+Ajax完成异步用户添加删除修改功能（超详细）
woshilishu的博客
04-17 3112
#说实话，我前端真的很一般，所以做这个要用js，css,我算是跌跌撞撞过来的...不过总算完成了 #实体类: Client: package com.example.main.classs; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.Gener...
【Ajax 在SpringBoot中的使用 】
qq_44682003的博客
03-08 3181
Ajax 中文官网：https://jquery.cuishifeng.cn/jQuery.Ajax.html Ajax1、什么是ajax2、异步的好处3、Ajax在SpringBoot中的使用4、Json 使用5、无参数返回字符串的ajax请求6、无参数返回json类型的ajax请求7、有参数返回json类型的ajax请求1. 少量参数处理方案2、大量参数处理方案 1、什么是ajax AJAX即Asynchronous JavaScript and XML（异步JavaScript和XML），是实现客
SpringMVC 实现文件上传(一:实现静态数据的添加)
weixin_41583535的博客
06-08 198
背景说明： 实现项目中图片的上传， 将用户选择的图片上传到本地磁盘， 将上传后本地存储的静态路径存放在数据库
写一个springmvc ajax
最新发布
04-28
这是一个简单的SpringMVC Ajax示例： 在前端页面中，定义一个表单和一个按钮，当用户点击按钮时，触发Ajax请求： ```html <html> <head> <title>SpringMVC Ajax Demo</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function() { $("#btnSubmit").click(function() { $.ajax({ type: "POST", url: "ajax", data: $("#myForm").serialize(), success: function(response) { $("#result").html(response); } }); }); }); </script> </head> <body> <form id="myForm"> <input type="text" name="name" placeholder="Enter your name"> <button type="button" id="btnSubmit">Submit</button> </form> <div id="result"></div> </body> </html> ``` 在后端中，编写一个Controller类，处理Ajax请求并返回响应： ```java @Controller public class MyController { @RequestMapping(value = "/ajax", method = RequestMethod.POST) public @ResponseBody String handleAjaxRequest(@RequestParam("name") String name) { String message = "Hello, " + name + "!"; return message; } } ``` 在这个示例中，我们使用了SpringMVC的@ResponseBody注解，将返回的字符串直接写入HTTP响应中。这个字符串将被前端的success函数接收并显示在页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飘2018

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值