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> ...
随机推荐
- Linux和Windows的换行符
一直对换行符这个东西概念比较模糊,直到最近花了一点时间仔细研究了一下,才彻底搞清楚这个问题,本文前面介绍部分是外文转载,后面例子是个人总结,希望能对大家有一些帮助. 回车符号和换行符号产生背景 关于“ ...
- URAL1410. Crack
1410 dp水题 题意读了好一会 是不能连续读两个及以上单词 #include <iostream> #include<cstdio> #include<cstring ...
- Qt之QHostInfo
简述 QHostInfo 类为主机名查找提供了静态函数. QHostInfo 利用操作系统提供的查询机制来查询与特定主机名相关联的主机的 IP 地址,或者与一个IP地址相关联的主机名.这个类提供了两个 ...
- WEBUS2.0 In Action - 索引操作指南(2)
上一篇:WEBUS2.0 In Action - 索引操作指南(1) | 下一篇:WEBUS2.0 In Action - 搜索操作指南(1) 3. 添加.删除.撤销删除和修改文档 在WEBUS中要将 ...
- android中handler用法总结
一.Handler的定义: Handler主要接收子线程发送的数据, 并用此数据配合主线程更新UI,用来跟UI主线程交互用.比如可以用handler发送一个message,然后在handler的线程中 ...
- scala学习笔记(2)
1 Loop (1) for (i <- 1 to 3){ # 1 2 3 } (2) for (i <- 1 until 3){ #1 2 } (3)过滤 for (i <- 1 ...
- (三)用Normal Equation拟合Liner Regression模型
继续考虑Liner Regression的问题,把它写成如下的矩阵形式,然后即可得到θ的Normal Equation. Normal Equation: θ=(XTX)-1XTy 当X可逆时,(XT ...
- 【英语】Bingo口语笔记(30) - 表示“拒绝”
- javamail模拟邮箱功能--邮件删除-中级实战篇【邮件标记方法】(javamail API电子邮件实例)
前言: JavaMail jar包下载地址:http://java.sun.com/products/javamail/downloads/index.html 本章可能是讲解javamail的最后一 ...
- Java中传值与传引用
不管Java参数类型是什么,一律传递参数的副本. <Thinking In Java>:“When you're passing primitives into a method,you ...