以前写过的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基础
什么是服务器:简单地,可以说服务器就是一个内存超大的计算机,可以存放很多数据和文件(当然,如果不需要太多的数据存储量,我们也可以用电脑.手机等一系列小型计算机作为服务器,只不过性能的差别而已) 网页浏 ...
随机推荐
- Emmet：一个Html/Css快速编辑神器的插件
一.介绍:Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度 二.使用 ...
- context-param和init-param区别
转载 http://www.cnblogs.com/hzj-/articles/1689836.html <context-param>的作用:web.xml的配置中<context ...
- salt-minion安装脚本
#!/bin/bash cd /usr/local/src/ wget http://mirrors.sohu.com/fedora-epel/6/x86_64/epel-release-6-8.no ...
- SqlServer数据库的一些方法的用途
一直分不清这三种方法的具体用法现在终于找齐了 ExecuteNonQuery方法和ExecuteScalar方法和ExecuteReader方法的区别 (1)ExecuteNonQuery():执行命 ...
- .net如何自定义config配置文件节点
本文转载:http://www.cnblogs.com/lori/archive/2013/04/03/2997617.html 对于小型项目来说,配置信息可以通过appSettings进行配置,而如 ...
- Web版的各种聊天工具
直到近期为止,我们经常使用的即时聊天工具(QQ.msn等)了Web版,大家不用下载庞大软件,直接打开网页就能够与自己的好友聊天,非常方便.在此将时汇总 便于大家查找 节约大 ...
- Java实现简单选择排序
package select; import java.util.Scanner; /*采用最简单的选择方式:从头到尾扫描序列找出最小的记录和第一个记录交换,接着在剩下的记录中继续这种选择和交换,最终 ...
- install lua client for redis-server on Mac
1. lua client library for redis-server https://github.com/nrk/redis-lua 2. dependent luasocket https ...
- Redhat YUM U盘源配置
Redhat YUM U盘源配置 1)在U盘创建目录 #mkdir /yum/Server 并从光盘Server.Packages 目录的所有文件拷贝到/yum/Server 2)安装 creater ...
- Java动态绑定
1. 动态绑定 将一个方法调用同一个方法主体关联起来被称作绑定. 在运行时根据对象的类型进行绑定,叫做后期绑定或运行时绑定.Java中除了static方法和final 例如,下面定义了一个Shape类 ...