jquery ajax jsonp跨域调用实例代码

前端技术 2023/09/08 JavaScript

客户端代码

复制代码 代码如下:

<%@ Page Language=\"C#\" AutoEventWireup=\"true\" CodeBehind=\"WebForm1.aspx.cs\" Inherits=\"WebApp.WebForm1\" %>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" >
<head runat=\"server\">
<script src=\"jquery-1.7.1.min.js\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
    function aa() {
        $.ajax({
            url: \"http://localhost:12079/WebForm2.aspx\",
            data: \"p1=1&p2=2&callback=?\",
            type: \"post\",
            processData: false,
            timeout: 15000,
            dataType: \"jsonp\",  // not \"json\" we\'ll parse
            jsonp: \"jsonpcallback\",
            success: function(result) {
            alert(result.value1);
            }
        });
    }

</script>
    <title></title>
</head>
<body>
    <form id=\"form1\" runat=\"server\">
    <div>

    </div>
    </form>
    <p>
        <input id=\"Button1\" type=\"button\" value=\"button\" onclick=\"aa()\" /></p>
</body>
</html>

服务器端代码

复制代码 代码如下:

 public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

          
         string callback = Request[\"callback\"];
            string v1=\"1\";
            string v2=\"2\";
            string response = \"{\\\"value1\\\":\\\"\" + v1 + \"\\\",\\\"value2\\\":\\\"\" + v2 + \"\\\"}\";
            string call = callback + \"(\" + response + \")\";
            Response.Write(call);
            Response.End();
        }
    }

客户端页面和服务器端页面在两个项目中，以便进行跨域调用测试。

跨域实例代码（需要加载jquery，页面为utf-8编码）：

复制代码 代码如下:

 <!--拉勾招聘数据-->
  <script type=\"text/javascript\">
   function success_jsonpCallback(data){
    var html = \'\';
    var pos = \'\';
    html += \'<ul>\';
    jQuery.each(data, function(k, v) {
                 if(k<10){
                  pos = \'【\' + v.city+ \'】\' + v.positionName + \'(\'+ v.salary +\') - \'+v.companyName;
      if(pos.length > 20){
       pos = pos.substring(0,19)+\'...\';
                     }
                     html += \'<li><a href=\"\'+v.posiitonDetailUrl+\'\" target=\"_blank\" title=\"【\' + v.city+ \'】\' + v.positionName + \'(\'+ v.salary +\') - \'+v.companyName+\'\">\'+pos+\'</a></li>\';
                 }
    });
    html += \'</ul><div class=\"more-link\"><a href=\"http://www.lagou.com/jobs/list_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91\" target=\"_blank\">更多</a></div>\';
    jQuery(\'#lagouData\').html(html);
   }

   function getLagouData() {
    jQuery.ajax({
     async:false,
     url: \"http://www.lagou.com/join/listW3cplus?kd=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91\",
     type: \"GET\",
     dataType: \"jsonp\",
     jsonpCallback: \'success_jsonpCallback\',
     contentType: \"application/jsonp; charset=utf-8\",
     success: function(data) {
      success_jsonpCallback(data);
     }
    });
   }
   getLagouData();
        </script>
      <div id=\"lagouData\"></div>

jsonp代码：

复制代码 代码如下:

success_jsonpCallback([{\"city\":\"广州\",\"companyName\":\"POCO.CN\",\"createTime\":\"15:02发布\",\"posiitonDetailUrl\":\"http://www.lagou.com:80/jobs/16868.html\",\"positionAdvantage\":\"身处凝聚力团队，老城区上班交通便利，双休\",\"positionName\":\"商业前端开发工程师\",\"salary\":\"4k-7k\"},{\"city\":\"北京\",\"companyName\":\"美通云动（北京）科技有限公司\",\"createTime\":\"14:47发布\",\"posiitonDetailUrl\":\"http://www.lagou.com:80/jobs/16866.html\",\"positionAdvantage\":\"Html5技术最棒的团队\",\"positionName\":\"Web前端开发\",\"salary\":\"4k-8k\"},{\"city\":\"杭州\",\"companyName\":\"口袋购物\",\"createTime\":\"14:42发布\",\"posiitonDetailUrl\":\"http://www.lagou.com:80/jobs/13024.html\",\"positionAdvantage\":\"广阔的发展平台、自我价值体现的地方\",\"positionName\":\"web前端开发工程师\",\"salary\":\"8k-12k\"},{\"city\":\"北京\",\"companyName\":\"布丁移动\",\"createTime\":\"14:02发布\",\"posiitonDetailUrl\":\"http://www.lagou.com:80/jobs/1498.html\",\"positionAdvantage\":\"三餐、周围美女如云\",\"positionName\":\"Android开发工程师\",\"salary\":\"10k-20k\"},{\"city\":\"北京\",\"companyName\":\"布丁移动\",\"createTime\":\"14:02发布\",\"posiitonDetailUrl\":\"http://www.lagou.com:80/jobs/2539.html\",\"positionAdvantage\":\"三餐，小桥流水人家，美女\",\"positionName\":\"ios开发工程师\",\"salary\":\"10k-20k\"},{\"city\":\"上海\",\"companyName\":\"天天动听\",\"createTime\":\"00:55发布\",\"posiitonDetailUrl\":\"http://www.lagou.com:80/jobs/11494.html\",\"positionAdvantage\":\"创业氛围 讲求小而美\",\"positionName\":\"Android开发工程师\",\"salary\":\"8k-16k\"},{\"city\":\"北京\",\"companyName\":\"LBE安全大师\",\"createTime\":\"11:39发布\",\"posiitonDetailUrl\":\"http://www.lagou.com:80/jobs/5983.html\",\"positionAdvantage\":\"五险一金 绩效奖金\",\"positionName\":\"Android开发工程师\",\"salary\":\"8k以上\"},{\"city\":\"北京\",\"companyName\":\"点心移动\",\"createTime\":\"11:24发布\",\"posiitonDetailUrl\":\"http://www.lagou.com:80/jobs/16736.html\",\"positionAdvantage\":\"技术导向的团队氛围，全方位的福利待遇\",\"positionName\":\"Android\",\"salary\":\"15k-25k\"},{\"city\":\"广州\",\"companyName\":\"荔枝FM\",\"createTime\":\"10:44发布\",\"posiitonDetailUrl\":\"http://www.lagou.com:80/jobs/16634.html\",\"positionAdvantage\":\"连坚持跑步、保持体重都有奖励哦！\",\"positionName\":\"WP手机开发工程师\",\"salary\":\"16k-25k\"},{\"city\":\"北京\",\"companyName\":\"网银-京东子公司\",\"createTime\":\"10:08发布\",\"posiitonDetailUrl\":\"http://www.lagou.com:80/jobs/14162.html\",\"positionAdvantage\":\"负责京东商城-互联网金融产品 JS开发\",\"positionName\":\"Javascript 前端开发工程师\",\"salary\":\"10k-20k\"}])

本文地址：https://www.stayed.cn/item/21531

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案