一个简单的Ajax功能（用到Jquery与Json）

效果图：

提示：上面的java学习和许肖飞不是写死的而是从服务器中获取的

1、在index.jsp页面载入jquery-1.8.3.js（放在WebRoot目录下的js文件夹里面）

并且在WebRoot下面的lib文件夹中导入

<scripttype="text/javascript"src="js/jquery-1.8.3.js"></script>

2、在index.jsp页面写入这句话

所有员工：<select id="empsel"></select>

效果图：

3、创建一个User对象

public class User {

private intuserid;

private String username;

public void setUserid(int userid) {

this.userid = userid;

}

public String getUsername() {

returnusername;

}

public void setUsername(String username) {

this.username = username;

}

}

4、创建一个UserServlet.java

importjava.io.IOException;

importjava.io.PrintWriter;

importjava.util.ArrayList;

importjava.util.List;

importjavax.servlet.ServletException;

importjavax.servlet.http.HttpServlet;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

importcom.google.gson.Gson;

public class UserServlet extends HttpServlet{

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

req.setCharacterEncoding("UTF-8");//处理中文乱码

resp.setCharacterEncoding("UTF-8");//处理中文乱码

PrintWriter writer= resp.getWriter();

List<User> list= new ArrayList<User>();//声明一个list存放多个User对象

User user1=new User();//就是上面声明的User对象

user1.setUserid(1);

user1.setUsername("java学习");

User user2=new User();

user2.setUserid(2);

user2.setUsername("许肖飞");

list.add(user1);

list.add(user2);

Gson gson= new Gson();//这个需要导入第三方包（gson-2.2.2.jar）不然用不了

String str=gson.toJson(list);//把list对象转成json格式的一个字符串

writer.print(str);//把str返回给ajax的data变量中

}

@Override

protected voiddoPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {

doGet(req, resp);

}

}

5、在web.xml中声明UserServlet（不然用不了）

<?xml version="1.0"encoding="UTF-8"?>

<web-app version="2.5"

xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<display-name></display-name>

<servlet>

<servlet-name>UserServlet</servlet-name>

<servlet-class>com.aaa.UserServlet </servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>UserServlet</servlet-name>

<url-pattern>/UserServlet</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

</web-app>

6、在index.jsp中写ajax结合jquery一起使用

<script type="text/javascript">

$(document).ready(function() {

$.get("UserServlet",function(data) {

$.each(data,function(i,user){

$("#empsel").append(" <option value='"+user.userid+"'>"+user.username+"</option>");

});

},"json");

});

</script>

注意：另外多声明一个<script type="text/javascript"></script>写上面的代码，不要在<scripttype="text/javascript"src="js/jquery-1.8.3.js"></script>里面写

• $(document).ready(function() {});页面一加载完就会执行function() {}里面的函数
• $.get("LoginServlet",function(data) {},"json");访问UserServlet(web.xml中UserServlet声明的路径) data是接收访问LoginServlet响应回来的json格式的字符串str的值（参考第四步writer.print(str)的值）

6、部署项目！访问index.jsp页面得到下面的效果：