SpringMVCフレームの下で、ajax非同期(asynchronous)要求をjQueryで送ります.
一、プロジェクトの中で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>
Google CDN(Googleのサイトは大陸でのアクセスが制限されていますので、ロード速度に影響があります.)<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です.もうテストに合格しました.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,サーバー端コードSprigMVCの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>
以下にもう一つのデモを添付します. 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");
}
});
}