正在加载中...

关闭
请选择需要拨打的号码
关闭
请根据问题类型选择QQ咨询

已解决:怎样通过asp后台+jquery前台+ajax通过jsonp解决跨域请求问题(附代码)?

已解决:怎样通过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.html',
             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.html?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代码,因此可能带来安全问题


返回上一页