zoukankan      html  css  js  c++  java

  • jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法，发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下，方便需要的朋友

    客户端代码

    复制代码 代码如下:

    <%@ 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"}])
  • 相关阅读:
    结构体比较
    不定长参数列表用法
    接口
    字符串数据类型
    *和**的打包和解包
    python类常用装饰器
    继承的实现
    map用法
    包的导入和init函数
    协程
  • 原文地址：https://www.cnblogs.com/huidaoli/p/3824572.html
Copyright © 2011-2022 走看看