●回復"每日一練"獲取以前的題目!
●【新】Android視頻更新了!(回復【安卓視頻】獲取下載連結)
●【新】Ajax知識點視頻更新了!(回復【學習視頻】獲取下載連結)
●【新】HTML5知識點視頻更新了!(回復【前端資料】獲取下載連結)
●答案公布時間:為每期發布題目的第二天
★【新】回復「測試題」獲取昨天發布的軟體工程師初級階段測試題答案
★【新】回復「學習資料」獲取java學習電子文檔
★【新】需要求職簡歷模板的可以加小編微信xxf960513
★【新】回復「聊天系統」獲取java多人聊天系統項目源碼!
●我希望大家積極參與答題!有什麼不懂可以加小編微信進行討論
★珍惜每一天,拼搏每一天,專心每一天,成功每一
如果你是初學者,或者是自學者!你可以加小編微信!小編可以給你建議以及給你提供學習資料!你在學習上有什麼問題都可以諮詢小編!小編都會為你解答!注:本公眾號純屬個人公眾號!不存在任何培訓機構招生信息
功能介紹:就是頁面已加載完成就通過ajax異步訪問伺服器然後去局部刷新頁面(也就是給從伺服器獲取的值存在頁面的下拉框中顯示如下圖:)
效果圖:
提示:上面的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頁面得到下面的效果:
-熱點文章推薦--
1、java學習微信討論群 查看
2、針對java初學者以及自學者的一套學習教材 查看
3、學習java需要會哪些知識才能夠去應聘工作?查看
4、針對java初學者以及自學者的一篇文章?查看
5、servlet實現文件上傳功能查看
6、servlet實現文件下載功能查看
7、Android學習視頻與資料查看
8、Servlet實現一個簡單的登錄【驗證碼】功能查看
*輕戳標題即可查看哦*