以前写过的ajax基础案例(王欢-huanhuan)

//load方法的使用

$('#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)

}

});

//get方法调用xml方法的基础使用

$('#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>';

$('#showXml').append($(html));

});

return false;

});

//getJSON的基础使用方法

$('#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;

});

//getScript的基础使用方法

$('#clickJS').click(function(){

$.getScript("js/11.js",function(){

alert('ok');

});

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/>');

});

<%@ 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/>');
}

$.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>

<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基础
什么是服务器:简单地,可以说服务器就是一个内存超大的计算机,可以存放很多数据和文件(当然,如果不需要太多的数据存储量,我们也可以用电脑.手机等一系列小型计算机作为服务器,只不过性能的差别而已) 网页浏 ...

随机推荐

SpringMVC学习系列之表单标签
http://www.cnblogs.com/liukemng/p/3754211.html 本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图 ...
仰视源代码，实现memcpy
C++实现内存的复制通常我们使用深复制就是通过内存复制实现的,可是对象的复制涉及到基类派生类及其相关类的问题.这里不讨论. 目的为了可以明确内存复制的底层实现. void* memcpy(void* ...
C++中的类访问控制
C++中 public,protected, private 访问标号小结第一:private, public, protected 访问标号的访问范围. private:只能由1.该类中的函数.2 ...
Matplot中文乱码完美解决方式
一.改动matplotlibrc文件 (永久解决方式) 1. 定位matplotlibrc文件该文件位于[python_install_dir]\Lib\site-packages\matplotl ...
转换流--OutputStreamWriter类与InputStreamReader类
12.4 转换流--OutputStreamWriter类与InputStreamReader类整个IO包实际上分为字节流和字符流,可是除了这两个流之外,还存在一组字节流-字符流的转换类. Out ...
linux使用过程中遇到的问题和解决方法
测试过程中,出现以下错误,导致远程ssh连接不上,最终导致测试结果失败.系统日志如下: Sep 1 03:15:03 node3 avahi-daemon[5834]: Invalid respo ...
动作之CCActionInstant(立即动作)家族
立即动作就是不需要时间,马上就完成的动作.立即动作的共同基类是CCActionInstant.CCActionInstant的常用子类有: CCCallFunc:回调函数包装器 CCFlipX:X轴翻 ...
svn各种问题总结
1.out of date 就是说别人已经更新到服务器了,而我修改的还不是服务器最新的. 直接Replace with 资源库的最新内容
HD1285(拓扑排序）
package cn.hncu.dataStruct.search.topSort; import java.util.Scanner; public class Hdu1285 { static S ...
POJ1329题
Circle Through Three Points Time Limit : 2000/1000ms (Java/Other) Memory Limit : 20000/10000K (Jav ...

以前写过的ajax基础案例(王欢-huanhuan)

以前写过的ajax基础案例(王欢-huanhuan)的更多相关文章

随机推荐

热门专题