首先ajax这种技术就不多进行介绍了,ajax分类中,有简介,主要的就是两个特点:异步请求,同步刷新
对于ajax这种技术,我们在平时的开发中,需要做的,也就是:通过ajax向后台Controller/handler发送请求,获取数据回到前台,进行数据处理。
下面就不多说了,直接上代码了。
①:传统
$(function(){ $('#send').click(function(){ $.ajax({ type: "GET",url: "test.json",data: {username:$("#username").val(),content:$("#content").val()},dataType: "json",success: function(data){ $('#resText').empty(); //清空resText里面的所有内容 var html = ''; $.each(data,function(commentIndex,comment){ html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para"' + comment['content'] + '</p></div>'; }); $('#resText').html(html); } }); }); });②:简洁(使用jquery对ajax'的封装)
//加载下拉菜单中的选项
fuction MenuLists(){
$.post(${pageContext.request.contextPath}/demoController/queryLists,
{parentid:1088},function(ret){
console.log(ret);
$("select>option:gt(0)").remove();
for(var i=0;i<ret.length;i++){
$("#selects").append("<option value="+ret[i].mid"+">"+
ret[i],modelName+"</option>")
}
})
}
③:第三种方式是我在做neo4j的前台页面展示的时候,使用的
$(function(){
$.get(${pageContext.request.contextPath}+'/demoController/testGraph',
{mid=1087},43); font-size:14px; line-height:26px; padding:0px; font-family:'Courier New'!important"> console.log(ret);
});
},'json');
原文链接:https://www.f2er.com/ajax/161200.html