效果图:
提示:上面的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>里面写
6、部署项目!访问index.jsp页面得到下面的效果: