一,如何在项目中引用jQuery
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>
<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>
<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(){ </span></li><li class="alt"><span> //文本框点击事件 </span></li><li class=""><span> ("#input_url").click( </span></li><li class="alt"><span> function(){ </span></li><li class=""><span> // </span></li><li class="alt"><span> var <span class="attribute">a</span><span> = <script type="math/tex" id="MathJax-Element-44">a = </script>(this); </span></span></li><li class=""><span> //发送ajax请求 </span></li><li class="alt"><span> .ajax({ </span></li><li class=""><span> // </span></li><li class="alt"><span> url:"AjaxAsynchronousRequestTest.action", </span></li><li class=""><span> type:'post', </span></li><li class="alt"><span> data:'<span class="attribute">name</span><span>=</span><span class="attribute-value">admin</span><span>', </span></span></li><li class=""><span> dataType:'json', </span></li><li class="alt"><span> success:function(data,status){ </span></li><li class=""><span> if(<span class="attribute">status</span><span> == "success"){ </span></span></li><li class="alt"><span> </span></li><li class=""><span> //接收服务器端传来的数据 </span></li><li class="alt"><span> var <span class="attribute">str_from_server</span><span> = </span><span class="attribute-value">data</span><span>.message; </span></span></li><li class=""><span> </span></li><li class="alt"><span> //将接收到的数据显示到文本框 </span></li><li class=""><span> (“#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代码
- <!– 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
- <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>
<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>
下面再附上一个demo:
- function Ajax_demo(){
- var ajaxUrl = ‘{ctx}/xxxcontroller/method_in_controller.html?ajax=true'</span><span>; </span></span></li><li class="alt"><span> var <span class="attribute">ajaxData</span><span> =</span><span class="attribute-value">""</span><span>; </span></span></li><li class=""><span> var <span class="attribute">iframeFlag</span><span> = </span><span class="attribute-value">false</span><span>; </span></span></li><li class="alt"><span> .ajax({
- type:’POST’,
- url:ajaxUrl,
- data:ajaxData,
- error:function(){
- alert(‘ajax错误’);
- if(iframeFlag){
- (".class_1").css("display","none"); </span></li><li class="alt"><span> }else{ </span></li><li class=""><span> (".class_2").css("display","none"); </span></li><li class="alt"><span> } </span></li><li class=""><span> }, </span></li><li class="alt"><span> success:function(data){ </span></li><li class=""><span> if(("#some_id").length <span class="tag">></span><span> 0){ </span></span></li><li class="alt"><span> $("#some_id").html(data); </span></li><li class=""><span> } </span></li><li class="alt"><span> </span></li><li class=""><span> (“.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");
}
});
}