SpringMVC框架下，通过jQuery发送ajax异步（asynchronous）请求

一，如何在项目中引用jQuery

jQuery官方CDN

[html] view plain copy

print ?

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 ?

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 ?

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;<script type="math/tex" id="MathJax-Element-44">a = </script>(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 ?

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 ?

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 ?

1.   

下面再附上一个demo：

[html] view plain copy

print ?

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");

            }
        });
    }