jQuery+Ajax+servlet简单demo

最新推荐文章于 2022-09-02 19:20:54 发布

ran718

最新推荐文章于 2022-09-02 19:20:54 发布

阅读量582

点赞数

分类专栏： jQuery ajax servlet

本文链接：https://blog.csdn.net/ran718/article/details/9469933

版权

jQuery 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

servlet

1 篇文章 0 订阅

订阅专栏

这真的是个最简单的demo了……记下来防止自己忘记~

一个页面（index.jsp）包含一个button和一行文字信息，一个servlet（HelloWorld.java）负责传回一个String，要求点击页面上的button，将页面上的文字改为servlet传回的String，并要用到jQuery和Ajax……（包括打成WAR包在tomcat中运行）

1.在eclipse里建立一个maven的web项目

（其实不是maven也可以……只是我刚开始用maven所以想试试……怎么建立的话……我改天再另写一篇……）

2.servlet

这个大概是世界上最简单的servlet文件了吧……

HelloWorld.java

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 返回一个String
 * Hello World!
 */
public class HelloWorld extends HttpServlet{
	public void doGet(HttpServletRequest rq, HttpServletResponse rp){
		String str = "Hello World!";
		PrintWriter out;
		try {
			out = rp.getWriter();//从HttpServletResponse(rp)拿到一个流
			out.print(str);//输出信息
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
	public void doPost(HttpServletRequest rq, HttpServletResponse rp){
		doGet(rq,rp);
	}

}

3.JSP

这个jsp也是很简单的……

index.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=ISO-8859-1">
<title>Hello World</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!--jQuery-->
<script>
$(document).ready(function(){
  $("button").click(function(){
	  $.get("HelloWorld",function(data){//执行servlet，并获取返回值
		  $("h3").html(data);//改变页面文字	  
		  });
  });
});
</script>

</head>
<body>
<h3 id="test">未执行</h3>//页面原文字
<button>click</button>
</body>
</html>

4.web.xml

servlet是需要一个配置文件的，因为项目很简单，所以相应的这个配置文件也很简单……

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

	<servlet>
        <servlet-name>HelloWorld</servlet-name>
        <servlet-class>servlet.HelloWorld</servlet-class> <!--servlet位置（点前面的是包名）-->
    </servlet>

    <servlet-mapping>
        <servlet-name>HelloWorld</servlet-name> <!--servlet名称-->
        <url-pattern>/HelloWorld</url-pattern> <!--servlet的URL-->
    </servlet-mapping>
    
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

5.pop.xml

maven的配置文件……

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.test.app</groupId>
  <artifactId>my-app</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>my-app Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
    <dependency>
	  <groupId>servletapi</groupId>
	  <artifactId>servlet-api</artifactId>
      <version>2.4-20040521</version>
    </dependency>
    
     <dependency>
       <groupId>org.apache.geronimo.specs</groupId>
       <artifactId>geronimo-servlet_2.5_spec</artifactId>
       <version>1.2</version>
     </dependency>
    
  </dependencies>
  <build>
    <finalName>my-app</finalName>
  </build>
</project>

6.文件分布

如下喽~

7.WAR+tomcat

现在只要在eclipse里面导出，格式为war包就好了，然后放在机子上tomcat文件夹中的webapps文件夹中，启动tomcat，会发现webapps文件夹中多了一个my-app文件夹，此时在浏览器中输入http://localhost:8080/my-app/index.jsp 就可以看见页面了~

但愿我没有少说什么……