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.');';
ajax 加载不同数据的更多相关文章
- C#曲线分析平台的制作(四,highcharts+ajax加载后台数据)
在上一篇博客:C#曲线分析平台的制作(三,三层构架+echarts显示)中已经完成了后台的三层构架的简单搭建,为实现后面的拓展应用开发和review 改写提供了方便.而在曲线分析平台中,往往有要求时间 ...
- vue通过ajax加载json数据
HTML <ul id="Hanapp"> <li class="styVue" v-for="item in actList&qu ...
- ajax加载表格数据
一.html代码 <style type="text/css"> .table-taskinfo table tr { border-top: 2px solid #9 ...
- ztree通过ajax加载json数据中文乱码的解决方法:springmvc配置
一.问题描述 使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: async: { enable ...
- jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...
- ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动
一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
- 使用ajax()方法加载服务器数据
使用ajax()方法加载服务器数据 使用ajax()方法是最底层.功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下: jQuery.a ...
- 一起学爬虫——如何爬取通过ajax加载数据的网站
目前很多网站都使用ajax技术动态加载数据,和常规的网站不一样,数据时动态加载的,如果我们使用常规的方法爬取网页,得到的只是一堆html代码,没有任何的数据. 请看下面的代码: url = 'http ...
- ajax点击加载更多数据图片(预加载)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Types of Entity in Entity Framework:
http://www.entityframeworktutorial.net/Types-of-Entities.aspx We created EDM for existing database i ...
- Hibernate HQL注入攻击入门
SQL注入是一种大家非常熟悉的攻击方式,目前网络上有大量存在注入漏洞的DBMS(如MySQL,Oracle,MSSQL等).但是,我在网络上找不到针对Hibernate查询语言的相关资源.因此本文总结 ...
- URAL1355. Bald Spot Revisited
1355 其实就是求质因子的个数 这样肯定是最多的 注意一下 除到最后不是1的情况 #include <iostream> #include<cstdio> #include& ...
- 【Todo】InnoDB、MyISAM、数据库引擎
关于InnoDB和MyISAM引擎的对比,下面这篇讲的挺好 http://www.cnblogs.com/vicenteforever/articles/1613119.html 这一篇关于InnoD ...
- java.lang.InstantiationException: DWR can't find a spring config. See the logs for solutions
在spring整合dwr时,报找不到配置文件 DWRcan't find a spring config. See the logs for solutions 解决办法: 在web.xml中添加一下 ...
- sass 常用函数的整理
@charset "utf-8"; @import "compass/css3/inline-block"; @import "compass/css ...
- 51nod1294 修改数组
看题解的...就是将必须要修改的数去掉后求最长的不递减子序列. upper_bound+lower_bound要理解.有时候-1有时候不用是有原因的. #include<cstdio> # ...
- php开启curl扩展
配置方法: 1.拷贝PHP目录中的libeay32.dll 和 ssleay32.dll 两个文件到 system32 目录. 2.修改php.ini:配置好 extension_dir ,去掉 ex ...
- BZOJ 1827 奶牛大集会
树型DP. #include<iostream> #include<cstdio> #include<cstring> #include<algorithm& ...
- POJ 2249 Binomial Showdown
// n 个 数 取 k个数的取法// C(n,k) 注意些细节#include <iostream> #include <string> #include<sstrea ...