以前写过的ajax基础案例(王欢-huanhuan)
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#clickJS').click(function(){
$.getScript("js/11.js",function(){
alert('ok');
});
return false;
});
$('#clickJSON').click(function(){
$.getJSON('js/text.json',function(data){
alert('成功了吗？');
$('#dictionary').empty();
$.each(data,function(entryIndex,entry){
var html = '<div class="entry">';
html += '<h3 class="term">'+entry['term']+'</h3>';
html += '<div class="part">'+entry['part']+'</div>';
html += '<div class="definition">'
html += entry['definition'];
if(entry['quote']){
html += '<div class="quote">';
$.each(entry['quote'],function(entryIndex,line){
html += '<div class="quote-line">' +line+ '</div>';
});
if(entry['author']){
html += '<div class="author">'+entry['author']+'</div>';
}
}
html += '</div>';
$('#dictionary').append(html);
});
});
return false;
});
$('#clickHTML').click(function(){
$('.htmlBox').load('demo.html');
return false;
});
$('#clickXML').click(function(){
$.get('js/demo.xml',function(data){
$('#showXml').empty();
$(data).find('entry').each(function(){
var $entry = $(this);
var html = '<div class="entry"></div>';
html += '<h3 class="term">'+$entry.attr('term')+'</h3>';
html += '<div class="part">'+$entry.attr('part')+'</div>';
html += '<div class="definition">';
html += $entry.find('definition').text();
var $quote = $entry.find('quote');
if($quote.length){
html += '<div class="quote">';
$quote.find('line').each(function(){
html += '<div class="quote-line">' +$(this).text()+ '</div>';
});
if($quote.attr('author')){
html += '<div class="quote-author">' +$quote.attr('author')+ '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
$('#showXml').append($(html));
});
});
return false;
});
//javascript json 调用
$('#getSZ').click(function(){
var varJson =[
{name:'huanhuan',age:'23',city:'beijing'},
{name:'majie',age:'23',city:'beijing'},
{name:'tutu',age:'26',city:'wenzhou'}
];
varJson[0].name='wanghuan';
for(var i in varJson){
alert(varJson[i].name);
$('#varJson').html('name:' + varJson[i].name +' '+ 'age:' + varJson[i].age +' '+ 'city:' + varJson[i].city + '<br/>');
}
var json ={
options:[
{name:'lujuan',age:'23',city:'beijing'},
{name:'lucy',age:'20',city:'hangzhou'},
{name:'yuanyuan',age:'25',city:'wenzhou'}
]
};
json = eval(json.options);
for(var n=0; n<json.length; n++){
alert(json[n].name);
$('#varJson00').html('name:' + json[n].name +' '+ 'age:' + json[n].age +' '+ 'city:' + json[n].city + '<br/>');
}
$.each(varJson,function(s){
$('#varJson01').append('name:' + varJson[s].name +' '+ 'age:' + varJson[s].age +' '+ 'city:' + varJson[s].city + '<br/>');
});
});
$('#loadBtn').click(function(){
//responseTxt 包含来自请求的结果数据
//statusTxt 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）
//xhr 包含 XMLHttpRequest 对象
//如果想要调用txt中的其他的一个标签里边的内容，那么就直接这样写 js/demo_ajax_load.txt h2
$('.ajaxDiv').load('js/demo_ajax_load.txt',function(responseTxt,statusTxt,xhr){
if(statusTxt=='success'){
alert('异步加载成功')
}
if(statusTxt=='error'){
alert('出错：'+xhr.status+':'+xhr.statusTxt)
}
});
});
})
</script>
</head>
<body>
<input type="button" value="点击加载js文件" id="clickJS" />
<div id="dictionary"></div>
<input type="button" value="点击加载json文件" id="clickJSON" />
<div class="htmlBox"></div>
<input type="button" value="点击加载html文件" id="clickHTML" />
<div id="showXml"></div>
<input type="button" value="点击加载xml文件" id="clickXML" />
<div id="varJson">
for循环出来：
</div>
<div id="varJson00">
for循环出来2：
</div>
<div id="varJson01">
each遍历出来：
</div>
<input type="button" value="javascript json 调用" id="getSZ" />
<div class="ajaxDiv"></div>
<input type="button" value="点击加载txt文件" id="loadBtn" />
</body>
</html>
以前写过的ajax基础案例(王欢-huanhuan)的更多相关文章
- Ajax基础知识 浅析（含php基础语法知识）
1.php基础语法 后缀名为.php的文件 (1) echo 向页面中输入字符串 <?php 所有php相关代码都要写在<?php ?>这个标签之中 echo &q ...
- _00017 Kafka的体系结构介绍以及Kafka入门案例(0基础案例+Java API的使用)
博文作者:妳那伊抹微笑 itdog8 地址链接 : http://www.itdog8.com(个人链接) 博客地址:http://blog.csdn.net/u012185296 博文标题:_000 ...
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...
- Ajax基础知识《一》
对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...
- jQuery基础---Ajax基础教程
jQuery基础---Ajax基础 内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax ...
- Ajax基础知识（二）
接上一篇 Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...
- 原生AJAX基础讲解及兼容处理
原文:原生AJAX基础讲解及兼容处理 AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML). AJAX不是新技术 ,但却是热门的技术.它 ...
- Web前端-Ajax基础技术(上)
Web前端-Ajax基础技术(上) ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应,实现网络编程. ajax发送 ...
- 第十三节 Ajax基础
什么是服务器:简单地,可以说服务器就是一个内存超大的计算机,可以存放很多数据和文件(当然,如果不需要太多的数据存储量,我们也可以用电脑.手机等一系列小型计算机作为服务器,只不过性能的差别而已) 网页浏 ...
随机推荐
- IOS获取物理尺寸中7Plus中获取的是7的物理尺寸
IOS获取物理尺寸中7Plus中获取的是7的物理尺寸: 在开发调试过程中我的7Plus手机获取[uiscreen mainscreen].bounds为750 .1334. 解决方案:在手机中的显示 ...
- Centos下安装FTP并进行虚拟用户访问方式配置
1. 安装认证所需包 [root@localhost]#yum install pam* [root@localhost]#yum install db4* 首先安装PAM(用于用户认证)和DB4(用 ...
- 使用freemarker生成html
http://herryhaixiao.iteye.com/blog/677524 由于freemarker这个技术很久很久就有了,注释我就没写得很详细了,相信大家都看得懂.下面就直接上代码以及一些代 ...
- MySQL参数优化
目前针对MySQL数据库进行了一些参数优化,具体如下: my.ini / my.cnf 参数说明 #使用查询缓存 query_cache_size=100M # ...
- mysql 服务器ip连接统计
有的时候数据库服务器连接数过大,也没有慢sql,想知道哪些应用服务器连接上来的比较多,下面的命令轻松搞定 netstat -tnp|grep ESTABLISHED|awk '{ print $5 } ...
- 电话qie听器
业务逻辑: 当有电话打进来或电话打出去的时候,对电话进行录音. public class TelphoneyListenerService extends Service { private stat ...
- [RxJS] Drag and Drop example
Improving our mouse drag event Our mouse drag event is a little too simple. Notice that when we drag ...
- [ES6] 22. Const
'const' keyword is for creating a read only variable, something you can never change once created. ' ...
- [Javascript] Chaining the Array map and filter methods
Both map and filter do not modify the array. Instead they return a new array of the results. Because ...
- MAC OS X 终端命令入门 （简单常用整理）
在这里记下..防止丢失 pwd 当前工作目录 cd(不加参数) 进root cd(folder) 进入文件夹 cd .. 上级目录 cd ~ 返回root cd - 返回上一个访问的目录 rm 文件名 ...