怎样通过asp后台+jquery前台+ajax通过jsonp解决跨域请求问题?(附代码)
在系统API开发过程中,常常会遇到跨域请求和读取json数据包的情况,但按照最新的chrome和firefox等主流浏览器的安全规则,在前端进行跨域请求是被禁止的。因此,jQuery提供了一种通过javascript的解决方案,也就是,让被请求的服务器返回的json数据以jQueryxxxxx({“result”:”success”,”msg”:”well done”})的格式提供javascript的脚本,而javascript的脚本则是允许在前端跨域请求的,于是解决了json在前端跨域请求的问题。当然,jQuery还提供了随机字符串安全验证,以便跨域请求不被非法恶意利用。 凯铧互联提供前端故障请求人工增值服务,如果您在开发中遇到了解决不了的问题,可以购买凯铧互联代维服务。
下面就来了解一下asp后台+jquery前台+ajax通过jsonp解决跨域请求问题的详细解决方案:
一、前台Ajax+json请求带参数示例代码
<script type=”text/javascript”>
$.getJSON(“test.asp”,{user:’admin’,pass:’123456′}, function(json){
alert(json[0].user)
alert(json[0].pass)
});
</script>
后台接收并返回json格式数据示例代码
user = request.QueryString(“user”)
pass = request.QueryString(“pass”)
add = “[{“”user””:”””+ user +”””,””pass””:”””+ pass +”””}]”
response.Write(add)
二、前台Ajax+json请求不带参数的代码示例
<script type=”text/javascript”>
$.getJSON(“test.asp”, function(json){
alert(json.length)
alert(json[0].id)
alert(json[0].name)
alert(json[1].id)
alert(json[1].name)
});
</script>
后台接收并返回json数据包代码
dim add
add = “[{“”id””:””123″”,””name””:””admin””},{“”id””:””456″”,””name””:””bxsc””}]”
response.Write(add)
三、Ajax+jsonp跨域请求代码
<script type=”text/javascript”>
$(document).ready(function(){
$.ajax({
url:’http://localhost/test.asp’,
dataType:”jsonp”,
jsonp:”callback”,
success:function(data){
var $ul = $(“<ul></ul>”);
$.each(data,function(i,v){
$(“<li/>”).text(v[“id”] + ” ” + v[“name”]).appendTo($ul)
});
$(“#res”).append($ul);
}
});
});</script>
<span id=”res”></span>
后台
jsonp = request.QueryString(“callback”)
str = “[{“”id””:””1″”,””name””:””测试1″”},{“”id””:””2″”,””name””:””测试2″”}]”
str = jsonp + “(” +str+”)”
response.Write(str)
四、跨域带参数请求
<span id=”myform”></span>
<script type=”text/javascript”>
$(document).ready(function(){
$.getJSON(“http://localhost/test.asp?callback=?”,{user:’administrator’,pass:’1314778′},function(json){
var msg = ”;
if(json){
//msg = “<div id=’result’><strong>提交成功!</strong><br/>姓名:”+json[0].user+”<br/>密码:”+json[0].pass+”</div>”
msg = “<div id=’result’><strong>提交成功!</strong><br/>姓名:”+json.user+”<br/>密码:”+json.pass+”</div>”
}else{
msg = “服务器忙,请稍候再试!”;
}
$(“#myform”).after(msg);
});
});
</script>
后端接收请求并返回jsonp(json)格式的数据
jsonp = request.QueryString(“callback”)
user = request.QueryString(“user”)
pass = request.QueryString(“pass”)
‘str = “[{“”user””:”””+ user +”””,””pass””:”””+ pass +”””}]”
str = “{“”user””:”””+ user +”””,””pass””:”””+ pass +”””}”
str = jsonp + “(” +str+”)”
response.Write(str)
使用eval解析JSON对象
var json=eval_r(“({sitename:’dreamdu’,sitedate:new Date(1980, 12, 17, 12, 0, 0)})”);
document.write(json.sitename);
document.write(json.sitedate);
结果:
dreamdu
Sat Jan 17 12:00:00 UTC+0800 1981
提示: 由于eval可以任意执行JavaScript代码,因此可能带来安全问题
如果您的问题还未能解决,您可以联系阿里云代理商凯铧互联客服寻求帮助。阿里云代理商凯铧互联提供阿里云服务器/企业邮箱等产品的代购服务,同样的品质,更多贴心的服务,更实惠的价格。 阿里云代理商凯铧互联会为您提供一对一专业全面的技术服务,同时还能为您提供阿里云其他产品购买的专属折扣优惠。通过凯铧互联购买可以获得折上折优惠!若您需要帮助可以直接联系我方客服,阿里云代理商凯铧互联专业技术团队为您提供全面便捷专业的7×24技术服务。 电话专线:136-5130-9831,QQ:3398234753。
购买阿里云产品找阿里代理凯铧互联更实惠!!