日期:2014-05-16  浏览次数:20475 次

分享链接 php+ajax实现内容获取与动态修改
还是由于工作上的需要,做了这个分享链接功能
这个功能看起来比较简单,要做好,还真的是要花点时间的
说明一下,由于jquery包实在有点大,大多功能这里用不上,所以就没有用它了
参考网上的JS,简单的写了点JS实现了此功能
三个文件:
parse_share.html 显示页面
parse.js 接收php返回的数据操作
parse.php 远程获取数据,并处理分析,返回json数据格式给js
看demo请到这里观看

在此也给上源码地址: 分享链接 php+ajax实现内容获取与动态修改(www.onlypo.com)

还是先把源码一个个的列出来:
parse_share.html 此文件没有什么好说的

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" type="text/javascript" src="/test/parseurl/parse.js"></script>
<title>分享链接 php+ajax实现内容获取与动态修改</title>
<style>
.float {
float:left;
padding: 5px;
}
.float2 {
float:left;
padding: 1px 5px;
}
.float2 span{
 
}
.inputs {
width: 350px;
border:1px solid #C7E0E7;
heigth: 33px;
padding: 8px 5px;
font-size:13px;
}
.input_small {
width: 240px;
}
.buttons {
border:medium none;
background-color:green;
height:33px;
width:50px;
cursor:pointer;
}
.clearboth {
clear:both;
float:left;
}
.title {
font-size:16px;
width:240px;
line-height:20px;
}
.content {
font-size:12px;
width:240px;
line-height:16px;
}
.content1 {
font-size:12px;
width:240px;
line-height:20px;
}
.clearboth img {
width: 120px;
height: 100px;
}
.backovercolor {
background-color: #FFFF99;
}
</style>
</head>
<body>
 
<div>
<div class="float"><input class="inputs" type="text" name="parseurl" id="parseurl" /></div>
<div class="float"><input class="buttons" type="button" name="parse" id="parse" value="获取" /></div>
<div id="append">
</div>
</div>
 
 
<script type="text/javascript">
//给按钮绑定事件
addNewThing(document.getElementById('parse'), 'click', parseAsynch);
</script>
</body>
</html> 


------解决方案--------------------
不过需要提醒一下,你使用 json 返回数据就称不上是 ajax 了,只能叫 ajaj

AJAX Asynchronous JavaScript and XML
ajaj Asynchronous JavaScript and JSON