用AJAX实现网页中的增删改


 用AJAX实现网页中的增删改

今天运用了Ajax读取数据库,并实现异步的网页中mvc增删改和分页在其中用到Dom读取XML文件和Html中的DOM写标签到网页中,并解决了浏览器的兼容性问题。

AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML)。AJAX 是一种在 2005 年由 Google 推广开来的编程模式。AJAX 不是一种新的编程语言,而是一种使用现有标准的新方法。通过 AJAX,你可以创建更好、更快以及更友好的 WEB 应用程序。AJAX 基于 JavaScript 和 HTTP 请求(HTTP requests)。

下面是实现的例图:



 

                                                 网页显示数据库内容  1.1

当点击“所有员工“时—>如图示1.1实现了如何通过ajax读取数据库,并分页显示实现局部刷新。



 

                                                        网页删除内容信息1.2

当点击“删除“时 –>如图所示1.2删除了编号为”111“的信息,并重新读取数据库。

                                                          网页修改内容信息1.3

当点击“修改“时 –>如图所示1.3 通过HTML中的DOM实现读取HTML中的内容,并且在部门下拉菜单中实现级联操作,修改成功后并存储到数据库,然后再读数据库显示。

网页添加内容信息1.4

当点击“添加用户“时 –>如图所示1.4 通过HTML中的DOM实现读取HTML中的内容,并且在部门下拉菜单中实现级联操作,添加并存储到数据库,然后再读数据库显示。

注意:实现代码在附件中!!

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SSM(Spring+SpringMVC+MyBatis)是一种常用的Java Web开发框架组合,可以方便地实现增删查(CRUD)操作。在SSM,可以通过Ajax技术来实现增删操作的异步请求。 下面是一些实现的步骤: 1. 在前端页面引入jQuery或其他类似的JavaScript库,以便使用Ajax进行异步请求。 2. 创建一个Controller类,并在其定义处理增删请求的方法。这些方法使用SpringMVC的注解来标记,如`@RequestMapping`。 3. 在前端页面编写JavaScript代码,使用Ajax发送HTTP请求到后端Controller的方法。根据需要,可以使用GET或POST方法,并传递相应的参数。 4. 在Controller方法,根据请求参数进行相应的增删操作。可以调用Service层的方法来处理业务逻辑,并通过MyBatis访问数据库。 5. 在Controller方法,根据操作结果返回相应的响应数据。可以使用JSON格式返回,以便前端页面进行处理。 下面是一个简单示例: 前端页面(示例为HTML): ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> function addData() { var data = { name: "John", age: 25 }; $.ajax({ url: "/add", type: "POST", data: JSON.stringify(data), contentType: "application/json", success: function(response) { // 处理成功响应 }, error: function(xhr, status, error) { // 处理错误响应 } }); } </script> <button onclick="addData()">Add Data</button> ``` Controller类: ```java @Controller public class DataController { @Autowired private DataService dataService; @RequestMapping(value = "/add", method = RequestMethod.POST) @ResponseBody public String addData(@RequestBody Data data) { // 调用Service层的方法进行数据添加操作 boolean success = dataService.addData(data); if (success) { return "Success"; } else { return "Error"; } } } ``` Service类: ```java @Service public class DataService { @Autowired private DataDao dataDao; public boolean addData(Data data) { // 调用MyBatis的Mapper接口进行数据库插入操作 int count = dataDao.insertData(data); return count > 0; } } ``` 以上示例为简化版,实际项目可能还涉及到参数校验、异常处理等其他内容。希望能帮到你!如果还有其他问题,请继续提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值