json ajax jsonp
1、json
1、使用node运行server.js开启一个web
（1）目录结构
（2）server.js文件
/*
NodeJS Static Http Server - http://github.com/thedigitalself/node-static-http-server/
By James Wanga - The Digital Self
Licensed under a Creative Commons Attribution 3.0 Unported License.
A simple, nodeJS, http development server that trivializes serving static files.
This server is HEAVILY based on work done by Ryan Florence(https://github.com/rpflorence) (https://gist.github.com/701407). I merged this code with suggestions on handling varied MIME types found at Stackoverflow (http://stackoverflow.com/questions/7268033/basic-static-file-server-in-nodejs).
To run the server simply place the server.js file in the root of your web application and issue the command
$ node server.js
or
$ node server.js 1234
with "1234" being a custom port number"
Your web application will be served at http://localhost:8888 by default or http://localhost:1234 with "1234" being the custom port you passed.
Mime Types:
You can add to the mimeTypes has to serve more file types.
Virtual Directories:
Add to the virtualDirectories hash if you have resources that are not children of the root directory
*/
var http = require("http"),
url = require("url"),
path = require("path"),
fs = require("fs")
port = process.argv[2] || 8888;
var mimeTypes = {
"htm": "text/html",
"html": "text/html",
"jpeg": "image/jpeg",
"jpg": "image/jpeg",
"png": "image/png",
"gif": "image/gif",
"js": "text/javascript",
"css": "text/css"};
var virtualDirectories = {
//"images": "../images/"
};
http.createServer(function(request, response) {
var uri = url.parse(request.url).pathname
, filename = path.join(process.cwd(), uri)
, root = uri.split("/")[1]
, virtualDirectory;
virtualDirectory = virtualDirectories[root];
if(virtualDirectory){
uri = uri.slice(root.length + 1, uri.length);
filename = path.join(virtualDirectory ,uri);
}
fs.exists(filename, function(exists) {
if(!exists) {
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
console.error('404: ' + filename);
return;
}
if (fs.statSync(filename).isDirectory()) filename += '/index.html';
fs.readFile(filename, "binary", function(err, file) {
if(err) {
response.writeHead(500, {"Content-Type": "text/plain"});
response.write(err + "\n");
response.end();
console.error('500: ' + filename);
return;
}
var mimeType = mimeTypes[path.extname(filename).split(".")[1]];
response.writeHead(200, {"Content-Type": mimeType});
response.write(file, "binary");
response.end();
console.log('200: ' + filename + ' as ' + mimeType);
});
});
}).listen(parseInt(port, 10));
console.log("Static file server running at\n => http://localhost:" + port + "/\nCTRL + C to shutdown");
3、index.html测试页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1>测试页面</h1>
</body>
</html>
4、启动方式如下
效果如下所示：
2、ajax
1、ajax具体使用方式
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url:'data.json', // 访问的路径
type:'get', // 访问的方式
dataType:'json', // 返回的数据格式
success:function (dat) {
alert(dat.name);
},
error:function () {
alert(dat.name);
}
})
})
</script>
</head>
<body>
<h1>测试页面</h1>
</body>
</html>
显示效果如下所示：
优化版本：
显示效果如下所示：
联系：
使用ajax读取json数据，页面显示登陆信息
文件目录如下：
1、index.html
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/slide2.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:'js/data.json',
type:'get',
dataType:'json'
})
.done(function(dat){
$('.user_login_btn').hide();
$('.user_info em').html(dat.name);
$('.user_info').show();
})
.fail(function(){
alert('服务器超时！')
})
})
</script>
<title>天天生鲜-首页</title>
</head>
<body>
<!-- 页面顶部 -->
<div class="header_con">
<div class="header">
<div class="welcome fl">欢迎来到天天生鲜!</div>
<div class="top_user_info fr">
<div class="user_login_btn fl">
<a href="">登录</a>
<span>|</span>
<a href="">注册</a>
</div>
<div class="user_info fl">
欢迎您：<em>张山</em>
</div>
<div class="user_link fl">
<span>|</span>
<a href="">我的购物车</a>
<span>|</span>
<a href="">我的订单</a>
</div>
</div>
</div>
</div>
<div class="center_con">
<!-- logo -->
<a href="index.html" class="logo fl"><img src="images/logo.png" alt="天天生鲜网站logo"></a>
<!-- 搜索 -->
<div class="search_con fl">
<form>
<input type="text" name="" class="input_txt fl" placeholder="搜索">
<input type="submit" name="" value="搜素" class="input_sub fr">
</form>
</div>
<!-- 购物车 -->
<div class="chart_con fr">
<a href="#" class="fl">我的购物车</a>
<span class="fr">5</span>
</div>
</div>
<div class="main_menu_con">
<div class="main_menu">
<h2 class="fl">全部商品分类</h2>
<ul class="fl">
<li><a href="">首页</a></li>
<li><a href="">手机生鲜</a></li>
<li><a href="">抽奖</a></li>
</ul>
</div>
</div>
<div class="center_con2">
<ul class="sub_menu fl">
<li><a href="">新鲜水果</a></li>
<li><a href="" class="icon02">新鲜水果</a></li>
<li><a href="" class="icon03">新鲜水果</a></li>
<li><a href="" class="icon04">新鲜水果</a></li>
<li><a href="" class="icon05">新鲜水果</a></li>
<li><a href="" class="icon06">新鲜水果</a></li>
</ul>
<div class="slide fl">
<ul class="slide_list">
<li><a href=""><img src="images/slide.jpg" alt="专题图片" /></a></li>
<li><a href=""><img src="images/slide02.jpg" alt="专题图片" /></a></li>
<li><a href=""><img src="images/slide03.jpg" alt="专题图片" /></a></li>
<li><a href=""><img src="images/slide04.jpg" alt="专题图片" /></a></li>
</ul>
<div class="prev"></div>
<div class="next"></div>
<ul class="points">
<!-- <li class="active"></li>
<li></li>
<li></li>
<li></li> -->
</ul>
</div>
<div class="adv fr">
<a href="#"><img src="images/adv01.jpg" alt="广告图片"></a>
<a href="#"><img src="images/adv02.jpg" alt="广告图片"></a>
</div>
</div>
<div class="common_model">
<div class="common_title">
<h3>新鲜水果</h3>
<ul>
<li><span>|</span></li>
<li><a href="">加州提子</a></li>
<li><a href="">加州提子</a></li>
<li><a href="">加州提子</a></li>
</ul>
<a href="#" class="more fr">查看更多 ></a>
</div>
<div class="common_goods_con">
<div class="common_banner fl">
<a href="#"><img src="images/banner01.jpg" alt="商品banner"></a>
</div>
<ul class="common_goods_list fl">
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
<div>¥ 38.00</div>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
<div>¥ 38.00</div>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
<div>¥ 38.00</div>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
<div>¥ 38.00</div>
</li>
</ul>
</div>
</div>
<div class="common_model">
<div class="common_title">
<h3>海鲜水产</h3>
<ul>
<li><span>|</span></li>
<li><a href="">加州提子</a></li>
<li><a href="">加州提子</a></li>
<li><a href="">加州提子</a></li>
</ul>
<a href="#" class="more fr">查看更多 ></a>
</div>
<div class="common_goods_con">
<div class="common_banner fl">
<a href="#"><img src="images/banner02.jpg" alt="商品banner"></a>
</div>
<ul class="common_goods_list fl">
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
<div>¥ 38.00</div>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
<div>¥ 38.00</div>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
<div>¥ 38.00</div>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
<div>¥ 38.00</div>
</li>
</ul>
</div>
</div>
<div class="common_model">
<div class="common_title">
<h3>猪牛羊肉</h3>
<ul>
<li><span>|</span></li>
<li><a href="">加州提子</a></li>
<li><a href="">加州提子</a></li>
<li><a href="">加州提子</a></li>
</ul>
<a href="#" class="more fr">查看更多 ></a>
</div>
<div class="common_goods_con">
<div class="common_banner fl">
<a href="#"><img src="images/banner03.jpg" alt="商品banner"></a>
</div>
<ul class="common_goods_list fl">
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
<div>¥ 38.00</div>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
<div>¥ 38.00</div>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
<div>¥ 38.00</div>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg" alt="商品图片"></a>
<div>¥ 38.00</div>
</li>
</ul>
</div>
</div>
<div class="footer">
<div class="footer_links">
<a href="">关于我们</a>
<span>|</span>
<a href="">联系我们</a>
<span>|</span>
<a href="">招聘人才</a>
<span>|</span>
<a href="">友情链接</a>
</div>
<p class="copyright">
CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved<br />
电话：010-****888 京ICP备*******8号
</p>
</div>
</body>
</html>
3、jsonp
1、基本使用
目录：
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url:'js/data.js', // js路径
type:'get',
dataType:'jsonp',
jsonpCallback:"fnback" // js中对应的函数名
})
.done(function (data) {
alert(data.name)
})
})
</script>
</head>
<body>
</body>
</html>
效果如下所示：
2、实现360输入词汇联想功能
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=d
$(function(){
$('#input01').keyup(function(){
var $val = $(this).val();
$.ajax({
url:'https://sug.so.360.cn/suggest?',
type:'get',
dataType:'jsonp',
data:{'word':$val}
})
.done(function(data){
console.log(data);
// 清空元素里面的内容
$('#list01').empty(); // 先清空之前的元素内数据
var dat = data.s;
for(var i=0;i<dat.length;i++)
{
var $newli = $('<li>');
$newli.html(dat[i]);
$newli.appendTo($('#list01'));
}
})
})
})
</script>
</head>
<body>
<input type="text" name="" id="input01">
<ul id="list01">
</ul>
</body>
</html>
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
