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

来源：互联网发布：sysbench mysql 测试编辑：程序博客网时间：2024/05/15 20:02

一，如何在项目中引用jQuery

jQuery官方CDN

[html] view plain copy

print?

<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 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?

<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>

<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?

//使用jQuery + Ajax + SpringMVC
(function(){  </li><li class="alt">    //文本框点击事件  </li><li class="">    ("#input_url").click(  </li><li class="alt">        function(){  </li><li class="">            //  </li><li class="alt">            var a = (this);  </li><li class="">            //发送ajax请求  </li><li class="alt">            .ajax({  </li><li class="">                //  </li><li class="alt">                url:"AjaxAsynchronousRequestTest.action",  </li><li class="">                type:'post',  </li><li class="alt">                data:'name=admin',  </li><li class="">                dataType:'json',  </li><li class="alt">                success:function(data,status){  </li><li class="">                    if(status == "success"){  </li><li class="alt">                      </li><li class="">                        //接收服务器端传来的数据  </li><li class="alt">                        var str_from_server = data.message;  </li><li class="">  </li><li class="alt">                        //将接收到的数据显示到文本框  </li><li class="">                        (“#response_div”).html(str_from_server);
}
},
//
error:function(xhr,textStatus,errorThrown){}
}
);
}
);
}
);

//使用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?

<!– 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>

<!-- 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?

/**
*
* @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 style="font-size:14px;">/** * * @author ycq * * Ajax Asynchronous request test * */@Controllerpublic 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?

下面再附上一个demo：

[html] view plain copy

print?

function Ajax_demo(){
var ajaxUrl = ‘{ctx}/xxxcontroller/method_in_controller.html?ajax=true';  </li><li class="alt"> var ajaxData ="";  </li><li class=""> var iframeFlag = false;  </li><li class="alt">    .ajax({
type:’POST’,
url:ajaxUrl,
data:ajaxData,
error:function(){
alert(‘ajax错误’);
if(iframeFlag){
(".class_1").css("display","none");  </li><li class="alt">            }else{  </li><li class="">                (".class_2").css("display","none");  </li><li class="alt">            }  </li><li class="">        },  </li><li class="alt">        success:function(data){  </li><li class="">            if(("#some_id").length > 0){  </li><li class="alt">                $("#some_id").html(data);  </li><li class="">            }  </li><li class="alt">              </li><li class="">            (“.class_3”).css(“display”,”none”);
}
});
}

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

0 0