ajax+servlet简单示例

参考网上做的一个Ajax+jsp+servlet的一个简单示例

不多说,一切尽在代码中

首先 jsp页面代码:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>电子邮件</title>
	<link href="css/index.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript">
	//ajax 创建XMLHttpRequest 对象
	var req;
	function creatReq(){
		 if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本),用xmlhttprequest对象创建
           	 {
              		  req=new XMLHttpRequest();
         		   }
          		  else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.
         		   {
            		    req=new ActiveXObject("Microsoft.XMLHttp");
          		  }
	}
	//ajax发送请求
	function doAjax(){
		creatReq();
		if(req) //成功创建xmlhttprequest
           		 {
            		    var mailAddress=document.getElementById("mailAddress").value;
          		      req.open("GET","/ajaxser?mailAddress="+mailAddress,true); //与服务端建立连接(请求方式post或get,地址,true表示异步)
           		     req.onreadystatechange = callback; //指定回调函数
          		    req.send(null); //发送请求
          		  }
	}
	//回调函数
	  function callback() //回调函数,对服务端的响应处理,监视response状态
        {
            if(req.readystate==4) //请求状态为4表示成功
            {
                if(req.status==200) //http状态200表示OK
                  {	 //所有状态成功,显示数据
		//注意 这里req.statusText得到的是控制台打印的数据 即System.out.println("XXX");中的数据,而req.responseText 得到的是写入的数据 急 out.writer("XXX") 中的数据。	
               	 document .getElementById ("message").innerHTML ="<font color='#ff0000'>"+req.responseText+"</font>";

            }
                else //http返回状态失败
                {
               		alert("请求发送失败");
                }
            }
            else //请求状态还没有成功,页面等待
            {
                document .getElementById ("message").innerHTML ="请求发送中...";
            }
        }
    //提交请求
       function doconfirm(){
       var email=document.getElementById("mailAddress").value;
       if(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(email)){
          doAjax();
       }
       else {
       alert("邮箱地址格式不正确、请正确填写");
       document.getElementById("mailAddress").focus();
       return;
       }
       }
   </script>
</head>
<body>
  邮箱地址:<input type="text" name="mailAddress" id="mailAddress"/><br/>
    	 <input type="button" value="确定" οnclick="doconfirm()"/><div id="message"></div>
</body>
</html>

 

 <servlet>
 	<servlet-name>ajaxser</servlet-name>
 	<servlet-class>com.hcdy.servlet.AjaxServlet</servlet-class>
 </servlet>
 <servlet-mapping>
 	<servlet-name>ajaxser</servlet-name>
 	<url-pattern>/ajaxser</url-pattern>
 </servlet-mapping>

 

servlet 中

public class AjaxServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse resp)
			throws ServletException, IOException {
		resp.setContentType("text/html;charset=utf-8");
		resp.setHeader("Cache-Control", "no-cache");
		PrintWriter out=resp.getWriter(); //
		String email=request.getParameter("mailAddress");
		if(email.equals("12345678@163.com"){ 
		out.writer("数据库中有该邮箱");
	}
	else out.writer("无该邮箱");
	out.close();
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		
		this.doGet(req, resp);
	}
}

 完成

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这是一个比较复杂的问题,我会尽可能给出详细的解答和代码示例。首先,我需要确认一下您的问题意思,您是要求使用Spring Boot、Ajax和Maven实现一个图书信息搜索功能,不使用JSP和Servlet,同时还需要连接Robo3T,是吗? 如果是这样的话,那么您需要按照以下步骤进行操作: 1. 创建Spring Boot项目 您可以使用Eclipse或者其他Java IDE创建一个Spring Boot项目,具体步骤如下: - 在Eclipse中选择File -> New -> Other -> Spring Starter Project - 输入项目名称和描述,选择使用Maven进行构建,选择需要的依赖项,点击Finish即可创建一个空的Spring Boot项目 2. 添加依赖项 Spring Boot项目需要添加一些依赖项,包括Spring Boot Web、Spring Boot Data MongoDB、MongoDB Driver、Jackson-databind等,您可以在Maven的pom.xml文件中添加这些依赖项,具体代码如下: ``` <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-mongodb</artifactId> </dependency> <dependency> <groupId>org.mongodb</groupId> <artifactId>mongo-java-driver</artifactId> <version>3.12.7</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> </dependency> </dependencies> ``` 3. 创建MongoDB数据库和集合 在Robo3T中创建一个名为“library”的数据库,并在其中创建一个名为“books”的集合,用于存储图书信息。您可以使用以下代码创建集合: ``` db.createCollection("books") ``` 4. 创建实体类 在Spring Boot项目中创建一个名为“Book”的实体类,用于映射MongoDB中的“books”集合。具体代码如下: ``` @Document(collection = "books") public class Book { @Id private String id; private String title; private String author; private String publisher; private int publishYear; private String isbn; // getter和setter方法省略 } ``` 5. 创建数据访问层接口 在Spring Boot项目中创建一个名为“BookRepository”的接口,用于访问MongoDB中的“books”集合。具体代码如下: ``` @Repository public interface BookRepository extends MongoRepository<Book, String> { List<Book> findByTitleContainingIgnoreCase(String title); } ``` 6. 创建控制器 在Spring Boot项目中创建一个名为“BookController”的控制器,用于处理图书信息搜索的请求。具体代码如下: ``` @RestController @RequestMapping("/books") public class BookController { @Autowired private BookRepository bookRepository; @GetMapping("/search") public List<Book> searchBooks(@RequestParam("title") String title) { return bookRepository.findByTitleContainingIgnoreCase(title); } } ``` 7. 创建前端页面 在Spring Boot项目中创建一个名为“index.html”的静态页面,用于展示图书信息搜索的结果。具体代码如下: ``` <!DOCTYPE html> <html> <head> <title>图书信息搜索</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script> </head> <body> <h1>图书信息搜索</h1> <input type="text" id="title" placeholder="请输入图书名称"> <button id="searchBtn">搜索</button> <table id="table"> <thead> <tr> <th>图书名称</th> <th>作者</th> <th>出版社</th> <th>出版年份</th> <th>ISBN号</th> </tr> </thead> <tbody> </tbody> </table> <script> $(document).ready(function() { $("#searchBtn").click(function() { $.ajax({ url: "/books/search?title=" + $("#title").val(), type: "GET", success: function(data) { var table = $("#table tbody"); table.empty(); $.each(data, function(index, book) { var row = $("<tr>"); row.append($("<td>").text(book.title)); row.append($("<td>").text(book.author)); row.append($("<td>").text(book.publisher)); row.append($("<td>").text(book.publishYear)); row.append($("<td>").text(book.isbn)); table.append(row); }); }, error: function() { alert("搜索失败!"); } }); }); }); </script> </body> </html> ``` 8. 运行应用程序 在Eclipse中右键单击项目名称,选择“Run As” -> “Spring Boot App”即可运行应用程序。 这样,您就可以通过访问http://localhost:8080/index.html来打开图书信息搜索页面,输入图书名称后点击“搜索”按钮,就可以通过Ajax异步请求后端接口,获取并展示搜索结果了。 需要注意的是,以上代码示例中没有包含分页功能,如果您需要添加分页功能,可以参考Spring Data MongoDB官方文档,或者使用第三方分页插件,比如PageHelper等。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值