zoukankan      html  css  js  c++  java
  • jsonp实现js跨域请求

    sonp是跨域通信的一个协议

    具体来说jsonp实现跨域请求其实是使用js文件引用(js文件不一定是.js结尾)可跨域的性质,将请求的结果包裹在客户端需要调用的js方法内部。需要前后端配合使用。

    前段代码:

    <script type="text/javascript">

    //1.声明方法

    var handler = function (data) {

    alert(data.text);

    };

    //2.后端提供jsonp服务的地址,输出结果必须为handler(data)形式

    // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)

    var url = "http://localhost:58073/jsonpServer.aspx?text=CA1998&callback=handler";

    // 创建script标签,设置其属性,利用script文件引用可跨域的特性

    var script = document.createElement('script');

    script.setAttribute('src', url);

    // 把script标签加入head,此时调用开始

    document.getElementsByTagName('head')[0].appendChild(script);

    </script>

    jquery使用:

    <script>

    jQuery(document).ready(function(){

    $.ajax({

    type: "get",

    async: false,

    url: "http://localhost:58073/jsonpServer.aspx?text=CA1998",

    dataType: "jsonp",

    jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)

    jsonpCallback:"?",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据

    success: function (data) {

    console.log(data);

    alert(data.text);

    },

    error: function(){

    alert('fail');

    }

    });

    });

    </script>

    后端代码:

    protected void Page_Load(object sender, EventArgs e)

    {

    string callBack = Request.QueryString["callback"];

    string text = Request.QueryString["text"];

    var jsonItem = new

    {

    code = 1,

    text = text

    };

    var data = JsonConvert.SerializeObject(jsonItem);

    Response.Write(callBack+"("+data+")");

    }

  • 相关阅读:
    celery 转自:https://www.cnblogs.com/pyedu/p/12461819.html
    k8s 学习笔记
    linux 学习笔记3
    yaml initc
    vi 块操作
    curl
    知名IT互联网公司
    ajax 上传文件给webapi(带basic认证)
    C# 后台请求api
    mvc 母版页保持不刷新
  • 原文地址:https://www.cnblogs.com/zhoushiya/p/12107680.html
Copyright © 2011-2022 走看看