html静态页面通过ajax的方式跨域访问java web项目
Java web 项目使用nutz框架
网站前台是通过后台静态页模板生成的静态html页面(此处不详细说明),现在需要在前台静态页面中添加文章的访问量,即要在生成文章的静态页模板中加入相应的代码调用返回访问量值的方法。
Java web后台代码如下:
/**
* 通过文章ID查询访问量表,如果有数值则加一返回;如果查询不到则新增一条记录,并且返回数值 1 ----by Numbgui
* @param content_id
* @param req
* @param resp
*/
@At
@Ok("raw")
public void contentTraffic(@Param("content_id") int content_id,HttpServletRequest req, HttpServletResponse resp){
Cms_content_traffic cmsContentTraffic = daoCtl.detailByCnd(dao, Cms_content_traffic.class,Cnd.where("content_id","=",content_id));
if(cmsContentTraffic != null){
int sum = cmsContentTraffic.getContent_traffic()+1;
cmsContentTraffic.setContent_traffic(sum);
Sql sql = Sqls.create(" update cms_content_traffic set content_traffic = "+sum+" where content_id = '"+content_id+"' ");
daoCtl.exeUpdateBySql(dao,sql);
}else{
cmsContentTraffic = new Cms_content_traffic();
cmsContentTraffic.setContent_id(content_id);
cmsContentTraffic.setContent_traffic(1);
daoCtl.add(dao,cmsContentTraffic);
}
// ajax调用之后的返回数据如下
PrintWriter out = null;
try{
String callback =req.getParameter("callback");//jquery生成的自定义函数名
resp.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=utf-8");
out = resp.getWriter();
out.print(callback+"({traffic:'"+cmsContentTraffic.getContent_traffic()+"'});");
}catch(Exception e){
}finally {
out.flush();
out.close();
}
}
前台JS如下:
window.οnlοad=function(){
var content_id = $("#trafficID").val();
// alert("content_id1115555 : "+content_id);
var url = "http://localhost:8088/private/cms/index/cms_indexpv/contentTraffic?content_id="+content_id+"&callback=?";
$.getJSON(url,function(backdata){
$("#content_traffic").html("访问量 :"+backdata.traffic);
});
}
ajax跨域访问的url后面必须有 &callback=?
var url = "http://localhost:8088/private/cms/index/cms_indexpv/contentTraffic?content_id="+content_id+"&callback=?";
如果没有的话则执行到返回值那就没有响应了(仅个人看法)
当然也可以使用 iframe 嵌入页面的方式跨域访问,访问方式如下:
<iframe src="http://localhost:8088/private/cms/index/cms_indexpv/contentTraffic?content_id=${content_ext.content_id}" width="100%"
height="25" allowTransparency="true" frameborder=0 scrolling=no></iframe>
但是用某些场合使用iframe嵌入会有样式上不协调的问题,比如iframe嵌入页面后,会自动在其前后换行(这也可能是我对iframe标签的属性不熟悉所造成的),当然,ajax的方式就我个人来说,可以避免iframe所造成的不必要的样式问题