jquery ajax jsonp跨域调用实例代码


Posted in Javascript onDecember 11, 2013

客户端代码

<%@ 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"}])
Javascript 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
Javascript函数的参数
Jul 16 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
js实现select下拉框菜单
Dec 08 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
JS实现小星星特效
Dec 24 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 #Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 #Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 #Javascript
判断javascript的数据类型(示例代码)
Dec 11 #Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 #Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 #Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 #Javascript
You might like
PHP与SQL注入攻击[二]
2007/04/17 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
一篇不错的Python入门教程
2007/02/08 Python
python调用shell的方法
2013/11/20 Python
Python3基础之基本运算符概述
2014/08/13 Python
python中类的一些方法分析
2014/09/25 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
Python自动抢红包教程详解
2019/06/11 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
解除劳动关系协议书范文
2014/09/11 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
带你了解Java中的ForkJoin
2022/04/28 Java/Android