ajax 加载不同数据

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script> function fn1 (data)
{
var oul1 = document.getElementById('ul1');
var html = '';
for(var i = 0; i < data.length; i++)
{
html += '<li>'+ data[i] +'</li>'
} oul1.innerHTML = html;
} function fn2 (data)
{
var oul2 = document.getElementById('ul2');
var html = '';
for(var i = 0; i < data.length; i++)
{
html += '<li>'+ data[i] +'</li>'
} oul2.innerHTML = html;
} function fn3 (data)
{
var oul3 = document.getElementById('ul3');
var html = '';
for(var i = 0; i < data.length; i++)
{
html += '<li>'+ data[i] +'</li>'
} oul3.innerHTML = html;
} window.onload = function ()
{
var obtn1 = document.getElementById('btn1');
var oul1 = document.getElementById('ul1'); obtn1.onclick = function ()
{
var oscript = document.createElement('script');
oscript.src = 'getData.php?callback=fn1';
document.body.appendChild(oscript);
} var obtn2 = document.getElementById('btn2');
var oul2 = document.getElementById('ul2'); obtn2.onclick = function ()
{
var oscript = document.createElement('script');
oscript.src = 'getData.php?t=str&callback=fn2';
document.body.appendChild(oscript);
} var obtn3 = document.getElementById('btn3');
var oul3 = document.getElementById('ul3'); obtn3.onclick = function ()
{
var oscript = document.createElement('script');
oscript.src = 'getData.php?t=str&callback=fn3';
document.body.appendChild(oscript);
}
}
</script>
</head> <body>
<input type="button" id="btn1" value="加载数字">
<ul id="ul1"></ul>
<input type="button" id="btn2" value="加载字母" />
<ul id="ul2"></ul>
<input type="button" id="btn3" value="加载字母" />
<ul id="ul3"></ul> </body>
</html>
<?php
$t = isset($_GET['t']) ? $_GET['t'] : 'num';
$callback = isset($_GET['callback']) ? $_GET['callback'] : 'fn1'; $arr1 = array('111111','22222222','33333333','4444444','555555555555555555555');
$arr2 = array('aaaaaaaaaaaa','bbbbbbbb','cccccccccccc','ddddddddd','eeeeeeeeeeee'); if ($t == 'num') {
$data = json_encode($arr1);
} else {
$data = json_encode($arr2);
} echo $callback.'('.$data.');';
上一篇:GDAL生成Erdas Imagine


下一篇:网站开发进阶(三十七)JSP页面跳转问题解决