网页前端后端分离设计(2)-简单演示

网页前端后端分离设计(2)-简单演示

基础知识获取

JQUERY教程 http://www.w3school.com.cn/jquery/

下面的内容看完后,你可以到以上地址,获得更多使用知识

首先,我们创建一个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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
window.onload=function(){getipinfo();}//网页打开时,自动运行getipinfo(),如果有多个程序要运行,如 a();b();c()....
//下面的函数从https://www.peuland.com/ipinfo/ip.php 得到一个IP的返回信息,参数有IP
function getipinfo(){
URl="https://www.peuland.com/ipinfo/ip.php";
//URl="http://int.dpool.sina.com.cn/iplookup/iplookup.php";
//一共有两种url提供服务,上面一种是https,下面一种是http
//记得,如果你的服务器是http服务,对应的url必须用http
//因为这里我的服务器是使用的https,所以调用的远端程序也必须是https的,不然浏览器都不能正常运行
$.getJSON(URl,{
	ip:"218.4.99.30",
format:"json"
},function(datas) {
		$("div#country").text(datas.country);
		$("div#province").text(datas.province);
		$("div#city").text(datas.city);
}
)

}
</script>
</head>
<div id="country"></div>
<div id="province"></div>
<div id="city"></div>
<body>
</body>
</html>

演示地址 :https://www.peuland.com/demo/test.htm

服务器返回的值为

{"country":"中国","province":"江苏","city":"苏州"}
$("div#country").text(datas.country);

上面含义为,查找div id=country,把其内容替换成datas.country,datas为返回的json对像 country为其中一项

{“country”:”中国”,”province”:”江苏”,”city”:”苏州”}可以看成是一个数组类

var datas=new Array(3)
datas["country"]="中国"
datas["province"]="江苏"
datas["city"]="苏州"

注:如果 ajax 结果页面的 ContentType 为 text/html 的话,jQuery 一样返回 html 字符串,而无法转换为 json。要jQuery转换json必须使ajax结果页面的 ContentType 为:application/json,这个问题暂时还没有想到解决方案

发表评论

电子邮件地址不会被公开。 必填项已用*标注

18 + 5 =