SpringMVC框架下,通过jQuery发送ajax异步(asynchronous)请求
2016-01-14 18:30
756 查看
一,如何在项目中引用jQuery
jQuery官方CDN
Google CDN(由于谷歌的网站在大陆访问受限,可能会影响加载速度)
二,发送ajax请求,简单的demo,已经测试通过
1,JavaScript代码
2,html代码
3,服务器端代码 SpringMVC的Controller
jQuery官方CDN
<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(由于谷歌的网站在大陆访问受限,可能会影响加载速度)
<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代码
//使用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代码
<!-- 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
<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>
相关文章推荐
- 通过jquery执行ajax取出后台数据
- 原生js实现 常见的jquery的功能
- [JQuery]往textarea中光标所在位置插入文本
- 转载JQuery绑定鼠标粘贴事件工具类
- jquery empty()方法在IE下报错的解决办法
- 获取和设置select的选中项的值
- Jquery常用表单元素操作总结
- 什么是jQuery
- jquery通过name,id,class取值或赋值
- Jquery实现列表项的快速检索
- jQuery中attr()和prop()在修改checked属性时的区别
- JQuery事件处理
- jQuery-实现图片的放大镜显示效果
- 轻松实现jquery手风琴效果
- jQuery取得iframe中元素的常用方法详解
- jquery ajax 使用layer的超时提示
- jquery对象和javascript对象即DOM对象相互转换
- jquery ajax无刷新页面上传
- jQuery 父iframe与子iframe 相互调用传值
- jquery.cxSelect插件,城市没单位