zoukankan      html  css  js  c++  java
  • 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.');';
  • 相关阅读:
    NGINX下配置404错误页面的方法分享
    mysql 统计
    nginx日志中访问最多的100个ip及访问次数
    ubuntu下完全安装mcrypt
    ngxtop:在命令行实时监控 Nginx 的神器
    AngularJs 返回上一页
    nginx 报错 upstream timed out (110: Connection timed out)解决方案
    IAP 破解漏洞验证
    AceAdmin-v1.4.0 下载
    TP QQ 微信 微博登录
  • 原文地址:https://www.cnblogs.com/mayufo/p/4299646.html
Copyright © 2011-2022 走看看