servlet+jquery小例子

最新推荐文章于 2022-01-07 18:14:26 发布
最新推荐文章于 2022-01-07 18:14:26 发布
阅读量100 收藏
点赞数
分类专栏： jquery 文章标签： jquery ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ldzyz007/article/details/84003968
版权
1.新建一Servlet，命名为CheckServlet
CheckServlet.java源代码如下：

01.package ajax.servlet;
02.import java.io.IOException;
03.import java.io.PrintWriter;
04.import javax.servlet.ServletException;
05.import javax.servlet.http.HttpServlet;
06.import javax.servlet.http.HttpServletRequest;
07.import javax.servlet.http.HttpServletResponse;
08./**
09. *
10. * @author Thinkpad
11. *
12. */
13.public class CheckServlet extends HttpServlet {
14. public void doGet(HttpServletRequest request, HttpServletResponse response)
15. throws ServletException, IOException {
16. response.setContentType("text/html");
17. response.setCharacterEncoding("UTF-8");
18. PrintWriter out = response.getWriter();
19.
20. String name = request.getParameter("username");
21. out.print("我是服务器，收到客户端的数据:"+name);
22. out.flush();
23. out.close();
24. }
25. public void doPost(HttpServletRequest request, HttpServletResponse response)
26. throws ServletException, IOException {
27. this.doGet(request, response);
28. }
29.}
package ajax.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*
* @author Thinkpad
*
*/
public class CheckServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();

String name = request.getParameter("username");
out.print("我是服务器，收到客户端的数据:"+name);
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}

2、编写客户端html文件
新建ajax.html文件

ajax.html文件源码如下：

view plaincopy to clipboardprint?
01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
02.<html>
03. <head>
04. <title>ajax实现校验</title>
05. <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
06. <mce:script type="text/javascript" src="jslib/verify.js" mce_src="jslib/verify.js"></mce:script>
07. </head>
08.
09. <body>
10. <input type="text" id="username">
11. <input type="button" value="校验" οnclick="verify()" >
12. <dir id="result"></dir>
13. </body>
14.</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax实现校验</title>
<mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
<mce:script type="text/javascript" src="jslib/verify.js" mce_src="jslib/verify.js"></mce:script>
</head>

<body>
<input type="text" id="username">
<input type="button" value="校验" οnclick="verify()" >
<dir id="result"></dir>
</body>
</html>

3、下载jquery.js文件
下载地址：http://docs.jquery.com/Downloading_jQuery
下载后，将文件拷贝到文件结构中

4、编写verify.js文件
verify.js源代码如下：

view plaincopy to clipboardprint?
01.function verify() {
02. // 注解
03. // alert("点击了按钮");
04. // jquery查询节点的方法
05. var jqueryObj = $("#username");
06. // 获取文本框中用户输入的数据
07. var username = jqueryObj.val();
08. // alert(username);
09. // 将数据发送给服务器的servlet
10. $.get("servlet/CheckServlet?username=" + username, null, callback);
11.}
12.// 回调函数
13.function callback(data) {
14. // alert("收到服务器返回的数据");
15. // alert(data);
16. var resultObj = $("#result");
17. resultObj.html(data);
18.}
function verify() {
// 注解
// alert("点击了按钮");
// jquery查询节点的方法
var jqueryObj = $("#username");
// 获取文本框中用户输入的数据
var username = jqueryObj.val();
// alert(username);
// 将数据发送给服务器的servlet
$.get("servlet/CheckServlet?username=" + username, null, callback);
}
// 回调函数
function callback(data) {
// alert("收到服务器返回的数据");
// alert(data);
var resultObj = $("#result");
resultObj.html(data);
}
ldzyz007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery+servlet 异步获取数据 并显示出来（很有收获的哦！）
04-11
NULL 博文链接：https://stamsuper1.iteye.com/blog/1681619
servlet+jquery的简单实现
春虫虫丶丶丶的博客
03-27 1246
这几天用servlet+jquery+html做了简单的前端和后台进行数据交换和传输的例子，遇到了很多问题，在图书馆找了一些资料，也参考了一些前辈的博客和网上的一些有关jquery的教程。下面就看看最终实现的效果吧。我这里实现的功能是在网页点击地图，然后获取相应地点的一些数据，也就是修改echarts的原始数据。下面是用jquery、ajax给后台post数据同时获取后台返回的结果。$.ajax(
servlet+jquery实现ajax
光华小丸子
04-25 1047
项目结构： index.html： ajax实例 $(function(){ $("#userName").blur(function(){ var userName = $("#userName").val(); i
AJAX JQuery+Servlet
wangsimiao118的博客
08-18 295
在JQuery框架的基础上实现AJAX还是比较方便的，下面是一些简单介绍： 下面通过Ajax实现注册信息的验证，先来看一下以"POST"的请求方式： JQuery代码： /js/jquery-1.8.3.js"> function validateUsername() { var username = $("#username").val(); var methodN
servlet和jquery
weixin_34055910的博客
05-27 336
2019独角兽企业重金招聘Python工程师标准>>> ...
servlet+jquery实现文件上传进度条示例代码
11-27
现在文件的上传，特别是大文件上传，都需要进度条，让客户知道上传进度。...注：由于jQuery版本用的是2.1.1,所以如果跑本例子源码，请用IE9以上或火狐、谷歌浏览器测试。   接收文件上传的servlet UploadFile
JSON+Jquery+servlet+jsp+ajax例子
11-29
JSON+Jquery+servlet+jsp+ajax例子,方便学习的人。
JDBC+JQuery+ajax小例子
12-22
JDBC+Serlvet+ajax用户登录，显示，删除等功能！
Mysql + jsp +javabean+ jquery +ajax+servlet等的例子综合
01-17
ajax入门例子。还有之前上传的实现从数据库读取数据传到前台，实现单选多选，从控制台读取选中的数据
struts2+jquery+ajax+servlet
10-15
包含两个例子，一个是jquery+ajax+servlet。 另一个是 jquery+ajax+struts2。 解压后可以直接运行。适合初学者。
ajax+servlet+jquery+jsp示例
04-06
从后台取出json数据，然后以table的形式展出。包含序号，名字，年龄。如1，张三，22。一共两行数据。
AJAX学习笔记----jquery+servlet实现用户名验证
03-01
NULL 博文链接：https://persistc.iteye.com/blog/264072
Java+Servlet+Jquery+Json基础示例
05-08
Java+Servlet+Jquery+Json基础示例
servlet+jquery+ajax+json 例子
LB0621的专栏
05-12 603
Java代码 import javax.servlet.http.HttpServlet;    import javax.servlet.http.HttpServletResponse;    import javax.servlet.http.HttpServletRequest;    import java.io.IOException;    import java.
jQuery+Servlet 前后端交互
我的博客
03-29 471
本文介绍了使用jQuery+Servlet实现的简单前后端交互和数据传输 1 项目依赖 <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.1</version> <
皓月酒店管理系统: Jquery + Servlet + Mybatis
Vodka的博客
01-07 1387
1.概述 中国的经济日益增长，人们的生活水平也在不断地提高，旅游成了人们享受生活的一种方式，从而带动旅游业的蓬勃生长，旅游业和宾馆行业本就相辅相成，所以对于宾馆的要求也随之提高。在宾馆行业里竞争愈发激烈，想要不与时代脱节，就必须紧跟时代高新技术的脚步。基础设施落后、管理水平低下、服务质量堪忧的宾馆管理将被湮没在时代前进车轮的尘埃后。以往的纯手工或简单的宾馆管理方式，早已不适合当代经济高速发展和信息快速增长的要求，因此必须运用现代化管理技术，以及完善的的酒店设备，运用完善的互联网技术和宾馆管理系统，从而提升宾
jQuery中JSON与Servlet应用小例
03-03 202
http://jackandroid.iteye.com/blog/512487  这几天边看边学jQuery，越发觉得jQuery确实是个非常好的js框架。jQuery中通过get,post,ajax等方法与服务器之间进行异步通行，非常简单与方便。  jQuery中 通常数据通信的格式有XML,HTML,JSON和TEXT等。 XML：好处是格式通用，提高重用性。坏处则是相对解析之类的
ajax在jquery中的请求和servlet中的响用
星空下的那个人影
01-19 763
在jsp中，首先，你需要导入jquery的架包：获取可返回站点的根路径：<% String path = request.getContextPath(); %>在jquery中写ajax请求：  $(function(){ $(".B").click(function(){                 $.ajax({        
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校的博客
05-29 1192
采用Ajax整合表单数据进行提交给Servlet后台代码、可以完成同步或者异步操作。 以下中，并没有去声明同步或者异步。该属性为async，默认值为true[异步]. 那么需要注意的是同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 通俗来说，同步操作会导致步骤内容具有阻塞性的操作 目录 1. 初级版_未采用ajax 1.1 页面代码 ： 1.2 Servlet代码...
图书管理系统（基于SpringBoot + MyBatisPlus + Restful + Vue + Jquery + Axios ）例子
最新发布
06-09
下面是一个基于 SpringBoot + MyBatisPlus + Restful + Vue + Jquery + Axios 的图书管理系统的简单例子： 1. 创建 SpringBoot 项目 使用 Spring Initializr 创建一个 SpringBoot 项目，并添加以下依赖： ```xml <!-- MyBatisPlus --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.4.3.1</version> </dependency> <!-- Druid 数据库连接池 --> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.2.6</version> </dependency> <!-- Lombok --> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.20</version> <scope>provided</scope> </dependency> <!-- Spring Web --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> ``` 2. 创建数据库表 创建数据库表 book 和 category，用于存储图书和图书分类信息。 ```sql CREATE TABLE `book` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `name` varchar(100) NOT NULL, `author` varchar(50) NOT NULL, `price` decimal(10,2) NOT NULL, `category_id` bigint(20) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; CREATE TABLE `category` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `name` varchar(50) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ``` 3. 配置 MyBatisPlus 和 Druid 数据库连接池 在 application.properties 中添加以下配置： ```properties # 数据库连接池配置 spring.datasource.url=jdbc:mysql://localhost:3306/book_management?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shanghai&characterEncoding=utf-8 spring.datasource.username=root spring.datasource.password=123456 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver # Druid 监控配置 spring.datasource.druid.stat-view-servlet.login-username=admin spring.datasource.druid.stat-view-servlet.login-password=admin spring.datasource.druid.stat-view-servlet.url-pattern=/druid/* # MyBatisPlus 配置 mybatis-plus.mapper-locations=classpath*:mapper/*.xml ``` 4. 创建实体类和 Mapper 接口 使用 MyBatisPlus 自动生成实体类和 Mapper 接口。 ```java @Data @TableName("book") public class Book { @TableId(type = IdType.AUTO) private Long id; private String name; private String author; private BigDecimal price; @TableField("category_id") private Long categoryId; } public interface BookMapper extends BaseMapper<Book> { } ``` ```java @Data @TableName("category") public class Category { @TableId(type = IdType.AUTO) private Long id; private String name; } public interface CategoryMapper extends BaseMapper<Category> { } ``` 5. 创建 Restful API 创建 Restful API，提供图书和图书分类的增删改查接口。 ```java @RestController @RequestMapping("/api/books") public class BookController { @Autowired private BookService bookService; @GetMapping public List<Book> listBooks() { return bookService.listBooks(); } @PostMapping public Book addBook(@RequestBody Book book) { bookService.addBook(book); return book; } @GetMapping("/{id}") public Book getBookById(@PathVariable Long id) { return bookService.getBookById(id); } @PutMapping("/{id}") public Book updateBook(@PathVariable Long id, @RequestBody Book book) { book.setId(id); bookService.updateBook(book); return book; } @DeleteMapping("/{id}") public Long deleteBookById(@PathVariable Long id) { bookService.deleteBookById(id); return id; } } @RestController @RequestMapping("/api/categories") public class CategoryController { @Autowired private CategoryService categoryService; @GetMapping public List<Category> listCategories() { return categoryService.listCategories(); } @PostMapping public Category addCategory(@RequestBody Category category) { categoryService.addCategory(category); return category; } @GetMapping("/{id}") public Category getCategoryById(@PathVariable Long id) { return categoryService.getCategoryById(id); } @PutMapping("/{id}") public Category updateCategory(@PathVariable Long id, @RequestBody Category category) { category.setId(id); categoryService.updateCategory(category); return category; } @DeleteMapping("/{id}") public Long deleteCategoryById(@PathVariable Long id) { categoryService.deleteCategoryById(id); return id; } } ``` 6. 创建 Service 接口和实现类 创建 Service 接口和实现类，实现图书和图书分类的增删改查功能。 ```java public interface BookService { List<Book> listBooks(); void addBook(Book book); Book getBookById(Long id); void updateBook(Book book); void deleteBookById(Long id); } @Service public class BookServiceImpl implements BookService { @Autowired private BookMapper bookMapper; @Override public List<Book> listBooks() { return bookMapper.selectList(null); } @Override public void addBook(Book book) { bookMapper.insert(book); } @Override public Book getBookById(Long id) { return bookMapper.selectById(id); } @Override public void updateBook(Book book) { bookMapper.updateById(book); } @Override public void deleteBookById(Long id) { bookMapper.deleteById(id); } } public interface CategoryService { List<Category> listCategories(); void addCategory(Category category); Category getCategoryById(Long id); void updateCategory(Category category); void deleteCategoryById(Long id); } @Service public class CategoryServiceImpl implements CategoryService { @Autowired private CategoryMapper categoryMapper; @Override public List<Category> listCategories() { return categoryMapper.selectList(null); } @Override public void addCategory(Category category) { categoryMapper.insert(category); } @Override public Category getCategoryById(Long id) { return categoryMapper.selectById(id); } @Override public void updateCategory(Category category) { categoryMapper.updateById(category); } @Override public void deleteCategoryById(Long id) { categoryMapper.deleteById(id); } } ``` 7. 创建前端界面 使用 Vue、Jquery、Axios 等前端技术实现前端界面。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书管理系统</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css"> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h3 class="text-center">图书管理系统</h3> </div> </div> <div class="row mt-5"> <div class="col-md-3"> <div class="card"> <div class="card-header"> 图书分类 </div> <div class="card-body"> <ul class="list-group"> <li class="list-group-item" v-for="category in categories" :key="category.id"> {{ category.name }} <button class="btn btn-sm btn-danger float-right" @click="deleteCategory(category.id)"> <i class="fas fa-trash"></i> </button> <button class="btn btn-sm btn-info float-right mr-2" @click="showCategoryModal(category)"> <i class="fas fa-edit"></i> </button> </li> </ul> <div class="text-center mt-3"> <button class="btn btn-primary" @click="showCategoryModal(null)"> 新增分类 </button> </div> </div> </div> </div> <div class="col-md-9"> <div class="card"> <div class="card-header"> 图书列表 </div> <div class="card-body"> <div class="form-inline mb-3"> <label for="categoryId" class="mr-2">分类：</label> <select class="form-control mr-3" id="categoryId" v-model="searchForm.categoryId"> <option value="">全部</option> <option v-for="category in categories" :key="category.id" :value="category.id">{{ category.name }}</option> </select> <button class="btn btn-primary mr-3" @click="searchBooks()"> 搜索 </button> <button class="btn btn-primary" @click="showBookModal(null)"> 新增图书 </button> </div> <table class="table table-striped"> <thead> <tr> <th>#</th> <th>图书名称</th> <th>图书作者</th> <th>图书价格</th> <th>图书分类</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="book in books" :key="book.id"> <td>{{ book.id }}</td> <td>{{ book.name }}</td> <td>{{ book.author }}</td> <td>{{ book.price }}</td> <td>{{ getCategoryNameById(book.categoryId) }}</td> <td> <button class="btn btn-sm btn-info mr-2" @click="showBookModal(book)"> <i class="fas fa-edit"></i> </button> <button class="btn btn-sm btn-danger" @click="deleteBook(book.id)"> <i class="fas fa-trash"></i> </button> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <!-- 图书分类模态框 --> <div class="modal fade" id="categoryModal" tabindex="-1" role="dialog" aria-labelledby="categoryModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <form> <div class="modal-header"> <h5 class="modal-title" id="categoryModalLabel">{{ categoryModalTitle }}</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="categoryName">分类名称：</label> <input type="text" class="form-control" id="categoryName" v-model="categoryModalData.name"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" @click="saveCategory()">保存</button> </div> </form> </div> </div> </div> <!-- 图书模态框 --> <div class="modal fade" id="bookModal" tabindex="-1" role="dialog" aria-labelledby="bookModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <form> <div class="modal-header"> <h5 class="modal-title" id="bookModalLabel">{{ bookModalTitle }}</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="bookName">图书名称：</label> <input type="text" class="form-control" id="bookName" v-model="bookModalData.name"> </div> <div class="form-group"> <label for="bookAuthor">图书作者：</label> <input type="text" class="form-control" id="bookAuthor" v-model="

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值