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 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
PHP生成树的方法
2015/07/28 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
使用PYTHON创建XML文档
2012/03/01 Python
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
使用Python的内建模块collections的教程
2015/04/28 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
Python如何重新加载模块
2020/07/29 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
高中体育教学反思
2014/01/24 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
节能环保演讲稿
2014/08/28 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android
Python正则表达式中flags参数的实例详解
2022/04/01 Python
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL