SpringMVC框架下，通過jQuery發送ajax異步（asynchronous）請求

原創 江小白不喝酒 2020-02-22 14:43


一，如何在項目中引用jQuery

jQuery官方CDN

[html] view plain copy
print?在CODE上查看代碼片派生到我的代碼片
  1. <span style=“font-size:14px;”><script type=“text/javascript” src=“http://code.jquery.com/jquery-1.12.0.min.js”></script>  
  2. <script type=“text/javascript” src=“http://code.jquery.com/jquery-migrate-1.2.1.min.js”></script></span>  
<span style="font-size:14px;"><script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script></span>

Google CDN（由於谷歌的網站在大陸訪問受限，可能會影響加載速度）

[html] view plain copy
print?在CODE上查看代碼片派生到我的代碼片
  1. <script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>    
  2. <script type=“text/javascript” src=“http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js”></script>    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>


二，發送ajax請求，簡單的demo，已經測試通過

1，JavaScript代碼


[html] view plain copy
print?在CODE上查看代碼片派生到我的代碼片
  1. //使用jQuery + Ajax + SpringMVC   
  2. (function(){&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;//文本框點擊事件&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp; ("#input_url").click(&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(){&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;<span class="attribute">a</span><span>&nbsp;=&nbsp; (this);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//發送ajax請求&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.ajax({&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:"AjaxAsynchronousRequestTest.action",&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:'post',&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data:'<span class="attribute">name</span><span>=</span><span class="attribute-value">admin</span><span>',&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType:'json',&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:function(data,status){&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<span class="attribute">status</span><span>&nbsp;==&nbsp;"success"){&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//接收服務器端傳來的數據&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;<span class="attribute">str_from_server</span><span>&nbsp;=&nbsp;</span><span class="attribute-value">data</span><span>.message;&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//將接收到的數據顯示到文本框&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (“#response_div”).html(str_from_server);  
  3.                     }  
  4.                 },  
  5.                 //  
  6.                 error:function(xhr,textStatus,errorThrown){}  
  7.             }  
  8.             );  
  9.         }  
  10.     );  
  11. }  
  12. );  
//使用jQuery + Ajax + SpringMVC 
$(function(){
    //文本框點擊事件
    $("#input_url").click(
        function(){
            //
            var $a = $(this);
            //發送ajax請求
            $.ajax({
                //
                url:"AjaxAsynchronousRequestTest.action",
                type:'post',
                data:'name=admin',
                dataType:'json',
                success:function(data,status){
                    if(status == "success"){

                        //接收服務器端傳來的數據
                        var str_from_server = data.message;

                        //將接收到的數據顯示到文本框
                        $("#response_div").html(str_from_server);
                    }
                },
                //
                error:function(xhr,textStatus,errorThrown){}
            }
            );
        }
    );
}
);

2，html代碼


[html] view plain copy
print?在CODE上查看代碼片派生到我的代碼片
  1. <!– Ajax Asynchronous request test –>  
  2.   
  3. <div id=“container”>     
  4.     <table class=“zebra”>  
  5.         <thead>  
  6.             <tr>  
  7.                 <th>Ajax Asynchronous request test</th>  
  8.                 </tr>  
  9.         </thead>  
  10.         <tbody>  
  11.             <tr>  
  12.                     <td><input type=“button” name=“determine_url” id=“input_url” value=“下面顯示ajax異步請求的數據，數據來自服務器端”/></td>  
  13.                 </tr>  
  14.         </tbody>  
  15.     </table>  
  16. </div>  
  17.   
  18. <!– Display the response body –>  
  19.   
  20. <div id=“response_div”></div>  
<!-- Ajax Asynchronous request test -->

<div id="container">   
    <table class="zebra">
        <thead>
            <tr>
                <th>Ajax Asynchronous request test</th>
                </tr>
        </thead>
        <tbody>
            <tr>
                    <td><input type="button" name="determine_url" id="input_url" value="下面顯示ajax異步請求的數據，數據來自服務器端"/></td>
                </tr>
        </tbody>
    </table>
</div>

<!-- Display the response body -->

<div id="response_div"></div>

3，服務器端代碼 SpringMVC的Controller


[html] view plain copy
print?在CODE上查看代碼片派生到我的代碼片
  1. <span style=“font-size:14px;”>/**  
  2.  *  
  3.  * @author ycq  
  4.  *  
  5.  * Ajax Asynchronous request test  
  6.  *  
  7.  */  
  8.   
  9. @Controller  
  10. public class AjaxAsynchronousRequestTestController {  
  11.       
  12.     @RequestMapping(“AjaxAsynchronousRequestTest.action”)  
  13.     @ResponseBody  
  14.     public Map<String,String> getBeanBySpringMethod(){  
  15.           
  16.         //創建一個Map，用來封裝數據  
  17.         Map<String,String> responseToAjax = new HashMap<String,String>();  
  18.           
  19.         responseToAjax.put(“message”, “ajax請求數據接收成功…”);  
  20.           
  21.         responseToAjax.put(“msg”, ”@ResponseBody”);  
  22.           
  23.         //測試輸出  
  24.         System.out.println(“測試…，打印這段文字，說明Ajax Asynchronous request 發送成功…”);  
  25.           
  26.         return responseToAjax;  
  27.     }  
  28. }</span>  
<span style="font-size:14px;">/**
 *
 * @author ycq
 *
 * Ajax Asynchronous request test
 *
 */

@Controller
public class AjaxAsynchronousRequestTestController {

    @RequestMapping("AjaxAsynchronousRequestTest.action")
    @ResponseBody
    public Map<String,String> getBeanBySpringMethod(){

        //創建一個Map，用來封裝數據
        Map<String,String> responseToAjax = new HashMap<String,String>();

        responseToAjax.put("message", "ajax請求數據接收成功...");

        responseToAjax.put("msg", "@ResponseBody");

        //測試輸出
        System.out.println("測試...，打印這段文字，說明Ajax Asynchronous request 發送成功...");

        return responseToAjax;
    }
}</span>
[html] view plain copy
print?在CODE上查看代碼片派生到我的代碼片
  1.   


下面再附上一個demo：

[html] view plain copy
print?在CODE上查看代碼片派生到我的代碼片
  1. function Ajax_demo(){  
  2.  var ajaxUrl = ‘{ctx}/xxxcontroller/method_in_controller.html?ajax=true'</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;var&nbsp;<span class="attribute">ajaxData</span><span>&nbsp;=</span><span class="attribute-value">""</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;var&nbsp;<span class="attribute">iframeFlag</span><span>&nbsp;=&nbsp;</span><span class="attribute-value">false</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp; .ajax({  
  3.         type:’POST’,  
  4.         url:ajaxUrl,  
  5.         data:ajaxData,  
  6.         error:function(){  
  7.             alert(‘ajax錯誤’);  
  8.             if(iframeFlag){  
  9.                 (".class_1").css("display","none");&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (".class_2").css("display","none");&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:function(data){&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(("#some_id").length&nbsp;<span class="tag">&gt;</span><span>&nbsp;0){&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#some_id").html(data);&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (“.class_3”).css(“display”,”none”);  
  10.               
  11.         }  
  12.     });  
  13. }  
 function Ajax_demo(){
     var ajaxUrl = '${ctx}/xxxcontroller/method_in_controller.html?ajax=true';
     var ajaxData ="";
     var iframeFlag = false;
        $.ajax({
            type:'POST',
            url:ajaxUrl,
            data:ajaxData,
            error:function(){
                alert('ajax錯誤');
                if(iframeFlag){
                    $(".class_1").css("display","none");
                }else{
                    $(".class_2").css("display","none");
                }
            },
            success:function(data){
                if($("#some_id").length > 0){
                    $("#some_id").html(data);
                }

                $(".class_3").css("display","none");

            }
        });
    }



江小白不喝酒
發佈了28 篇原創文章 · 獲贊 20 · 訪問量 12萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

mybatis開啓MapperScannerConfigurer導致properties不生效

背景 spring和mybatis集成過程中，我們可以通過MapperFactoryBean的方式配置Mapper接口。但是這樣需要在配置文件中，爲每個mapper配置相同的代碼塊，浪費時間。關鍵對於代碼潔癖的人來說，一點不能忍。 <bea

原創 2024-02-07 13:55:41

Java字符串的一些理解

爲什麼要研究字符串？ 人機交互的過程中，文字、數字、字母、符號都是字符表現形式，這部分內容佔了人機信息交互的大部分內容，所以有必要明確一些基本問題。因此大部分數據類型都應該有字符串表達形式，我們在定義新類型的時候可以根據需要來定義新類型的

原創 2023-10-31 09:11:32

（二）java版spring boot 社交電子商務平臺-security簡單使用

security的簡單原理： 使用衆多的攔截器對url攔截，以此來管理權限。但是這麼多攔截器，不可能對其一一來講，主要講裏面核心流程的兩個。 首先，權限管理離不開登陸驗證的，所以登陸驗證攔截器AuthenticationProcessing

原創 2023-10-10 11:05:06

（三）java版spring cloud+spring boot+redis多租戶社交電子商務平臺-Spring Cloud實戰隨機端口

我們經常會需要啓動多個實例的情況來測試註冊中心、配置中心等基礎設施的高可用，也會用來測試客戶端負載均衡的調用等。但是，我們一個應用只能有一個端口號，這就使得在本機測試的時候，不得不爲同一個服務設置不同的端口來進行啓動。 在本地用不同端口啓動

原創 2023-10-10 11:05:04

如何使用 Java 反射？反射的用法及案例

簡介     Java Reflection，稱爲 Java 反射，是Java基礎部分的一個比較難的點。Reflection（反射）是被視爲動態語言的關鍵，通過反射機制，我們可以在運行時（runtime）獲取類的完整結構。例如，可以獲取到

原創 2023-10-10 02:23:57

最新美團面試集合（一面+二面+三面+重點技術面試題）附面試解析

一面 1. 簡短自我介紹 2. 事務的ACID，其中把事務的隔離性詳細解釋一遍 3. 髒讀、幻影讀、不可重複讀 4. 紅黑樹、二叉樹的算法 5. 平常用到哪些集合類？ArrayList和LinkedList區別？HashMap內部數據結構

原創 2023-10-10 01:43:49

Java程序員不想被裁員困擾，應該怎樣築基、發展才能越走越遠？

  當我們站在技術之路的原點，未來可能充滿了迷茫，也存在着很多不同的可能。在這個知識爆炸與終身學習/碎片化學習爲主的時代，我們面臨的問題之一就是如何進行有效學習，不僅能有效平衡廣度與深度，並且能真正的積澱下來，提升自己的研發效能。於筆者而

原創 2023-10-10 01:43:34

阿里巴巴Java開發手冊 梳理筆記 - finally 塊必須對資源對象、流對象進行關閉

阿里巴巴Java開發手冊 梳理筆記 - finally 塊必須對資源對象、流對象進行關閉 規約內容： 2.1 異常處理 6. 【強制】 finally 塊必須對資源對象、流對象進行關閉，有異常也要做 try - catch 。 說明：如果

原創 2023-08-02 10:29:06

java併發-CAS的理解

在Java方面，能夠實現多線程安全修改對象值得方法只有2個 1.原子操作 2.互斥方法 而在Java當中，或是其他語言中，基本上也都是使用CAS實現。CAS是比較並交換的意思，這個操作包含2個連續的操作，比較，還有賦值，因爲2個操作在cpu

原創 2023-05-29 01:40:21

java併發-Timer類的使用和原理

單線程輪詢並執行任務，有可能會導致飢餓。比較適合於一些具有一個任務的週期調度。 任務列表用數組存儲，元素最前面的元素是最先被執行的任務。 schedule方法是固定間隔執行，根據上一次執行的結束時間來定義間隔的開始時間 scheduleAt

原創 2023-03-28 01:52:22

java併發-ReadWriteLock代碼理解

創建的ReadWriteLock需要使用兩個方法來繼續創造2個對象，分別是ReadLock和WriteLock。 這兩個鎖對象的方法調用都會匯聚到ReadWriteLock的Sync類中。多個對象的方法調用匯聚到一個對象上面，這個設計模式是

原創 2023-03-28 01:52:20

WEB系統身份校驗

在web系統中，身份校驗是常用的方式。登錄頁面，是爲用戶提供登錄的入口。但是，有的時候，我們使用ajax操作的時候，由於得不到正確的數據信息，而使頁面停留不能跳轉到登錄頁面。其實，http協議的請求頭可以幫我們輕鬆解決這個問題。 在J

原創 2024-02-07 13:55:31

界面控件DevExtreme v23.1、v23.2盤點 - 增強的TypeScript(Angular、React、Vue)

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

原創 2024-05-07 11:34:56

Web前端開發常用到的和升職加薪的技能點分別是哪些？

隨着互聯網的高速發展以及技術的不斷革新，Web前端工程師需要掌握的技術也有所變更。很多人想知道當前常用的Web前端技術有哪些?如何快速掌握這些技術?接 常用的Web前端技術有哪些? Web前端是爲了協調前端設計與後端開發之間工作的崗位，是

原創 2023-10-10 09:55:05

現在入行web前端開發晚了？數據代表一切

前端程序員是大家都公認的高薪崗位，那他們的工資到底有沒有傳說中那麼高呢？我們來看看職友集的數據。 數據來源：職友集 就北上廣深杭的前端薪資來看，平均薪資均達到一萬以上。 通常來講： 工作1~2年後會成爲前端高級軟件工程師，年薪可以

原創 2023-10-10 09:54:58