JQuery与Ajax调用新浪API获取短网址的代码


Posted in Javascript onFebruary 07, 2014
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>获取新浪短网址</title> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> 
<!--<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>--> 
</head> 
<body> 
<label for="long">长网址:</label> 
<input value="http://baike.baidu.com/link?url=XLrVdYRThMvU_DlDT67v2wg9XYgG3xXvsB97WZFDz4psPORqGotkTiH1O5L1SGrD9Du-OSxWt_5E2KNtk01HhK" id="long"><br><br> 
<label for="app_key">输入您的app_key(没有可到网上搜索):</label><br> 
<input value="211160679" id="app_key"><br><br> 
<span id="short">短网址:</span><br><br> 
<span id="dlgcy">调用地址:</span><br><br> 
<button type="button" id="btn">Click me</button><br> 
<!--<span id="link">网址:</span>--> 
<br><br><br> 
<a href="http://www.cnblogs.com/azure/archive/2012/08/29/WeiboAPI.html" target="_blank">参考文章:以短链服务为例,探讨免AppKey、免认证、Ajax跨域调用新浪微博API</a> 
<br><br> 
<a href="http://open.weibo.com/tools/console?uri=short_url/shorten&httpmethod=GET&key1=url_long&value1=http%3A%2F%2Fopen.weibo.com%2Fqa" target="_blank">新浪API测试</a> 
</body> <script type="text/javascript"> 
$(document).ready(function(){ 
$("#btn").click(function(){ 
var short = $("#short"); 
var long = $("#long").val(); //获取属性值; 
//var url = "https://api.weibo.com/2/short_url/shorten.json"; //官方API地址; 
var url2 = "http://api.weibo.com/2/short_url/shorten.json"; 
var app_key = $("#app_key").val();//app_key无效可能会导致无反应; 
//var access_token; 
//var cmd = url + "&url_long=" + long + "&access_token=" + access_token; 
var cmd2 = url2 + "?source=" + app_key + "&url_long=" + long; 
var message=""; 
$.ajax({ //底层方法; 
url: cmd2, 
type: "GET", 
dataType: "jsonp", //使用JSONP方法进行AJAX,json有跨域问题; 
cache: false, 
success: function (data, status) { 
//获取传回的信息; 
for(x in data.data.urls[0]) message += x+'='+data.data.urls[0][x]+'&'; 
alert("Data:\n" + message + "\n\nStatus: " + status); 
short.append( data.data.urls[0].url_short + "<br>"); 
//$("#dlgcy").hide(); 
$("#dlgcy").text(cmd2); 
}, 
error: function(obj,info,errObj){ 
alert("$.ajax()中发生错误:" + info); 
} 
}); 
}); 
}); 
</script> 
</html>

代码下载
Javascript 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
基于JQUERY的多级联动代码
Jan 24 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 #Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 #Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 #Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 #Javascript
JQUERY 设置SELECT选中项代码
Feb 07 #Javascript
jquery操作select详解(取值,设置选中)
Feb 07 #Javascript
jquery select 设置默认选中的示例代码
Feb 07 #Javascript
You might like
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
js常用代码段整理
2011/11/30 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
深入解析Python中的线程同步方法
2016/06/14 Python
详解python 发送邮件实例代码
2016/12/22 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
Python实现多进程的四种方式
2019/02/22 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
酒店总经理工作职责
2013/12/13 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
营销学习心得体会
2014/09/12 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
自主招生专家推荐信
2015/03/26 职场文书
python基础之停用词过滤详解
2021/04/21 Python