一個簡單的Ajax功能(用到Jquery與Json)

2021-03-02 java學習

 

●回復"每日一練"獲取以前的題目!

【新】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實現一個簡單的登錄【驗證碼】功能查看

*輕戳標題即可查看哦*

相關焦點

  • 原生Ajax和jquery的ajax有什麼區別?
    主要內容ajax是什麼ajax作用原生ajax請求jquery的ajax請求jquery裡面封裝的ajax方法學習目標第一節 Ajax與http術語ajax最早產生於2005年,Ajax表示Asynchronous JavaScript and XML(異步JavaScript和XML
  • 使用jQuery的ajax技術+JSON數據格式+C#+SQL Server實現數據顯示
    這裡使用jQuery的ajax技術+JSON格式的數據+SQL Server資料庫來實現數據以表格形式顯示的功能。這裡創建一個普通的aspx頁面,然後在該頁面的*.aspx.cs後臺代碼中編寫一個靜態方法,這裡需要提前引入Newtonsoft.Json的第三方程序集。
  • Jquery事件
    ​ jquery調用ajax方法:​ 格式:$.ajax({});​ 參數:​ type:請求方式GET/POST​ url:請求地址url​ async:是否異步,默認是true表示異步​ data:發送到伺服器的數據​ dataType:預期伺服器返回的數據類型
  • JSON&AJAX
    ls","age":19}]'; // 寫 JSON,這個格式的字符串裡面存一個員工數據 var json3 = '{"id":1, "name":"zs", "age":18, "dept":{"id":5,"name":"開發部"}}';
  • jQuery的$.get()、$.post()和$.ajax()以GET/POST方式請求數據
    $.ajax()功能最為強大,一般情況下,獲取數據的GET請求和提交數據的POST請求,都可以使用$.ajax()方法來實現。$.ajax()方法的參數是一個對象,以鍵值對的形式設置參數:$.ajax({鍵:值})一、async參數在$.ajax()方法中,可以使用async參數設置同步還是異步,默認$.ajax()方法是異步的,即async
  • jQuery 1.5發布 Ajax模塊重寫
    /ajax/jQuery/jquery-1.5.min.jsGoogle:https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js (發稿時為止尚未上線)新版本的主要改進可以參見變更日誌:http://api.jquery.com/category/version/1.5/。
  • AJAX筆記分享
    安裝nodemon服務方法(自動重啟js的服務)•需要已經安裝nodejs程序•右鍵需要安裝的js打開終端•輸入 sudo npm install -g nodemon(win不需要輸入sudo)•之後需要開啟自動重啟功能,輸入nodemon server.js 即可5.HTML端的設置1.
  • 使ajax請求自動帶上cookie
    ajax請求無論是否跨域,默認請求頭中都是不會自動帶上cookie信息的。如果需要ajax請求自動在請求頭中帶上cookie信息,需要所訪問的伺服器允許這樣的操作。瀏覽器發送預檢請求獲取到響應頭中有這個欄位,則認為伺服器允許在發送ajax請求時自動帶上cookie信息。伺服器允許這樣的操作後,那麼前端發送ajax請求的時候,就需要進行這樣的操作。jquery的ajax請求中設置withCredentials=true即可。
  • jquery ztree入門 - CSDN
    《j2ee 簡單網站搭建:(一) windows 作業系統下使用 eclipse 建立 maven web 項目》《j2ee 簡單網站搭建
  • 如何進行JSON 數據客戶端進行傳輸
    如何進行JSON 數據客戶端進行傳輸 在前面我已經寫了ASP的版本,最近一個項目中正好需要用json來填充下拉框,所以寫了一個asp.net將資料庫裡的記錄轉換成JSON 數據。
  • 教程:---《JQuery如何工作》
    前言:我最近在做一個項目,需要用到ajax,我以前做ajax項目,已經有很多年了,jquery還不成熟,需要自己編寫大量的Javascript代碼。如果你還沒有一個測試頁面,請先從按照下面的代碼創建一個HTML頁面。<!
  • 一個幫助你處理延遲重複循環操作的jQuery插件 - timing
    在今天的這篇插件介紹中,我們將介紹一個超棒的jQuery插件,幫助你快速的使用鏈式和延遲代理模式來實現類似的效果。這個插件提供了簡單實用的方法來定義列舉,timeout,interval,延遲,並且使用基於時間的循環,僅僅使用數行就可以實現。如何使用?
  • 前端ajax或axios發送數據後端實體類接受(實例和報錯原因)
    用到最多的就是ajax和vue組件的axios來傳數據到後端。首先,小喵在學習的過程中發現如果在數據傳輸過程中各種報錯的話,可能是在哪些方面的。ajax不能傳後臺沒有的參數,或者實體中沒有的成員變量。還有就是,這句是小喵在別人的博客上看到的一段:@RequestBody接收的是一個Json對象的字符串,而不是一個Json對象。在ajax請求往往傳的都是Json對象,用 JSON.stringify(data)的方式就能將對象變成字符串。
  • 7 個 jQuery 最佳實踐
    這時候我們就要用到回退地址:當應用程式無法找到緩存庫的時候,它就會回退回來,使用伺服器文件。  Google CDN 是這樣的:<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>  Microsoft CDN是這樣的:<script src="//ajax.aspnetcdn.com
  • 編寫jquery插件的分享
    作為一個前段程式設計師,肯定經常用到一些javascript插件吧,不得不承認,jquery是其中的比較優秀的插件之一,那麼我們有沒有想過我們自己也可以來封裝一個插件呢,下面我給大家分享一些方法,希望對大家有些幫助。
  • Springmvc框架對json的支持 Java程式設計師必看
    這是我的jsp頁面,我們使用Jquery的方式對後端發送json字符串,這就需要引入jquery這個框架, 當我啟動項目是js死活都解析不出來jquery的路徑,經過好長一段時間的忙活終於找出來了問題所在,原來罪魁禍首就是springmvc中的DispatcherServlet,它把我的jquery路徑當做請求處理了,於是我們必須不讓他處理這個請求,讓它對靜態資源放行需要進行如下配置
  • jQuery學習筆記
    jQueryjQuery概念安裝簡單使用選擇器基本選擇器組合選擇器 分組與嵌套基本篩選器屬性選擇器表單篩選器篩選器方法(
  • jquery 三級聯動插件專題及常見問題 - CSDN
    在開發工作中,有時候需要我們自己去手動開發一個插件,剛好我遇到了這樣的機會,也有時間去完成這個插件,所以就做了一個適合自己的項目的三級聯動下拉插件。
  • 動手編譯自定義版本的最新 jQuery 類庫?
    你是不是覺得jQuery類庫不夠靈活,不像其它的框架或者類庫,例如,dojo那樣一樣可以動態的加載模塊,或者你在你的項目中沒有使用jQuery提供的所有功能,比如,不需要AJAX相關功能,只需要DOM相關的操作功能。