您的位置:首页 > Web前端 > JQuery

(跨域)jquery.ajax提交请求并返回json数据

2013-11-30 10:14 831 查看
       当我们在两个java项目之间互相调用接口时就会遇到跨域请求的问题,这次我开发系统的注册功能后台实现是调用的用户管理中心的接口,前台通过$.ajax请求并处理返回的json数据,其中注意一点就是如果出现中文的时候最好是转码传输到后台解码,要不然容易出现乱码问题。

前台jsp页面的代码



<script type="text/javascript">

$(document).ready(function(){
$("#submitBtn").click(function(){
var flag = validateForm();//数据校验
if (flag > 0) {
alert("您的注册信息填写不正确,请查看错误信息!");
return false;
}
if(!$("#checkbox_agree").is(':checked')){
alert("您还没有查看“用户使用协议”,请先下载查看!");
return false;
}

var url = "${url }";//获取请求地址,最好是从项目配置文件读取,容易维护
var userName = encodeURI($("#name").val());
var userPwd = $("#pwd").val();
var emailFalg = $("#email").val();
var fName = encodeURI($("#fullName").val());//中文转码,防止乱码
var orgCodeFlag = $("#orgCode").val();
var data = {name:userName,pwd:userPwd,email:emailFalg,orgCode:orgCodeFlag,fullName:fName};
$.ajax({
type : "get",
async : false,  //同步请求
url : url,
data : data,
dataType : "jsonp", //跨域请求需要使用jsonp
contentType: "application/x-www-form-urlencoded; charset=utf-8",
timeout:1000,
success:function(json){
alert(json.messages); //请求成功前台给出提示
$("#pwd").attr("value","");
$("#pwdAffirm").attr("value","");
$("#orgCode").attr("value","");
window.location.href="${ctx}/item/getItem"; //跳转
},
error: function() {
alert("注册失败,请稍后再试!");
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});

});
});

</script>


注:后台java代码解码使用:

java.net.URLDecoder.decode(fullName,"utf-8");
总结:上面的跨域请求虽然能够完成注册功能,可以实现数据交换,如果是登录功能的话安全性能就差了一些,因为前台的js代码很容易被修改,那是不是还有别的办法既能解决安全问题还能跨域请求交换数据呢?答案是必须的,下一篇博客将介绍安全跨域请求。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: