AJAX游戲界面圖片輪播，加載條，JQUERY遍歷JSON數(shù)組顯示成表格，遠(yuǎn)程調(diào)用【詩書畫唱】
視頻學(xué)習(xí)筆記：
{"name":"詩書畫唱有點(diǎn)帥","age":20}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.bg {
background-color: red;
}
.ft {
font-size: 50px;
}
</style>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
// $('#btn').click(function(){
// //將sub.html中的內(nèi)容加載到id為ctx的div中
// $('#ctx').load('data/sub.html .bg');
// });
$('#btn').click(function(){
//加載json文件中的內(nèi)容
$('#ctx').load('data/data.json',function(res,status,xhr){
//將json字符串轉(zhuǎn)換成js對象
var obj = JSON.parse(res);
// alert(obj.name);
// alert(obj.age);
//? ? ? ? ? ? ? ? ? ? ? for(var i = 0;i < obj.length;i ++) {
//? ? ? ? ? ? ? ? ? ? ? var o = obj[i];
//? ? ? ? ? ? ? ? ? ? ? alert(o.name);
//? ? ? ? ? ? ? ? ? ? ? }
})
})
});
</script>
</head>
<body>
<input type="button" id="btn" value="加載數(shù)據(jù)" />
<div id="ctx"></div>
</body>
</html>
下面實(shí)現(xiàn)的是游戲界面的圖片輪播效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
? ? ? ? ? ? $('#btn').click(function(){
? ? ? ? ? ? $.get('data/data.json',function(res){
? ? ? ? ? ? var name = res.name;
? ? ? ? ? ? var age = res.age;
? ? ? ? ? ? $('#name').val(name);
? ? ? ? ? ? $('#age').val(age);
? ? ? ? ? ? });
? ? ? ? ? ? });
});
</script>
</head>
<body>
<input type="button" id="btn" value="加載數(shù)據(jù)" />
<input type="text" id="name" />
<input type="text" id="age" />
</body>
</html>
圖片輪播和血條，加載條：
/*?
?* Core Owl Carousel CSS File
?* v1.3.3
?*/
/* clearfix */
.owl-carousel .owl-wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* display none until init */
.owl-carousel{
display: none;
position: relative;
width: 100%;
-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
display: none;
position: relative;
-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
overflow: hidden;
position: relative;
width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item{
float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
cursor: pointer;
}
.owl-controls {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* mouse grab icon */
.grabbing {?
? ? cursor:url(grabbing.png) 8 8, move;
}
/* fix */
.owl-carousel? .owl-wrapper,
.owl-carousel? .owl-item{
-webkit-backface-visibility: hidden;
-moz-backface-visibility:? ? hidden;
-ms-backface-visibility:? ? ?hidden;
? -webkit-transform: translate3d(0,0,0);
? -moz-transform: translate3d(0,0,0);
? -ms-transform: translate3d(0,0,0);
}
/*
* Owl Carousel Owl Demo Theme?
* v1.3.3
*/
.owl-theme .owl-controls{
margin-top: 10px;
text-align: center;
}
/* Styling Next and Prev buttons */
.owl-theme .owl-controls .owl-buttons div{
color: #FFF;
display: inline-block;
zoom: 1;
*display: inline;/*IE7 life-saver */
margin: 5px;
padding: 3px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background: #869791;
filter: Alpha(Opacity=50);/*IE7 fix*/
opacity: 0.5;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
text-decoration: none;
}
/* Styling Pagination*/
.owl-theme .owl-controls .owl-page{
display: inline-block;
zoom: 1;
*display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
display: block;
width: 12px;
height: 12px;
margin: 5px 7px;
filter: Alpha(Opacity=50);/*IE7 fix*/
opacity: 0.5;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #869791;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
}
/* If PaginationNumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers{
height: auto;
width: auto;
color: #FFF;
padding: 2px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
/* preloading images */
.owl-item.loading{
min-height: 150px;
background: url(AjaxLoader.gif) no-repeat center center
}
/*?
?*? Owl Carousel CSS3 Transitions?
?*? v1.3.2
?*/
.owl-origin {
-webkit-perspective: 1200px;
-webkit-perspective-origin-x : 50%;
-webkit-perspective-origin-y : 50%;
-moz-perspective : 1200px;
-moz-perspective-origin-x : 50%;
-moz-perspective-origin-y : 50%;
perspective : 1200px;
}
/* fade */
.owl-fade-out {
? z-index: 10;
? -webkit-animation: fadeOut .7s both ease;
? -moz-animation: fadeOut .7s both ease;
? animation: fadeOut .7s both ease;
}
.owl-fade-in {
? -webkit-animation: fadeIn .7s both ease;
? -moz-animation: fadeIn .7s both ease;
? animation: fadeIn .7s both ease;
}
/* backSlide */
.owl-backSlide-out {
? -webkit-animation: backSlideOut 1s both ease;
? -moz-animation: backSlideOut 1s both ease;
? animation: backSlideOut 1s both ease;
}
.owl-backSlide-in {
? -webkit-animation: backSlideIn 1s both ease;
? -moz-animation: backSlideIn 1s both ease;
? animation: backSlideIn 1s both ease;
}
/* goDown */
.owl-goDown-out {
? -webkit-animation: scaleToFade .7s ease both;
? -moz-animation: scaleToFade .7s ease both;
? animation: scaleToFade .7s ease both;
}
.owl-goDown-in {
? -webkit-animation: goDown .6s ease both;
? -moz-animation: goDown .6s ease both;
? animation: goDown .6s ease both;
}
/* scaleUp */
.owl-fadeUp-in {
? -webkit-animation: scaleUpFrom .5s ease both;
? -moz-animation: scaleUpFrom .5s ease both;
? animation: scaleUpFrom .5s ease both;
}
.owl-fadeUp-out {
? -webkit-animation: scaleUpTo .5s ease both;
? -moz-animation: scaleUpTo .5s ease both;
? animation: scaleUpTo .5s ease both;
}
/* Keyframes */
/*empty*/
@-webkit-keyframes empty {
? 0% {opacity: 1}
}
@-moz-keyframes empty {
? 0% {opacity: 1}
}
@keyframes empty {
? 0% {opacity: 1}
}
@-webkit-keyframes fadeIn {
? 0% { opacity:0; }
? 100% { opacity:1; }
}
@-moz-keyframes fadeIn {
? 0% { opacity:0; }
? 100% { opacity:1; }
}
@keyframes fadeIn {
? 0% { opacity:0; }
? 100% { opacity:1; }
}
@-webkit-keyframes fadeOut {
? 0% { opacity:1; }
? 100% { opacity:0; }
}
@-moz-keyframes fadeOut {
? 0% { opacity:1; }
? 100% { opacity:0; }
}
@keyframes fadeOut {
? 0% { opacity:1; }
? 100% { opacity:0; }
}
@-webkit-keyframes backSlideOut {
? 25% { opacity: .5; -webkit-transform: translateZ(-500px); }
? 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
? 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
}
@-moz-keyframes backSlideOut {
? 25% { opacity: .5; -moz-transform: translateZ(-500px); }
? 75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
? 100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
}
@keyframes backSlideOut {
? 25% { opacity: .5; transform: translateZ(-500px); }
? 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
? 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
}
@-webkit-keyframes backSlideIn {
? 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
? 75% { opacity: .5; -webkit-transform: translateZ(-500px); }
? 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
}
@-moz-keyframes backSlideIn {
? 0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); }
? 75% { opacity: .5; -moz-transform: translateZ(-500px); }
? 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); }
}
@keyframes backSlideIn {
? 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
? 75% { opacity: .5; transform: translateZ(-500px); }
? 100% { opacity: 1; transform: translateZ(0) translateX(0); }
}
@-webkit-keyframes scaleToFade {
? to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleToFade {
? to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleToFade {
? to { opacity: 0; transform: scale(.8); }
}
@-webkit-keyframes goDown {
? from { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes goDown {
? from { -moz-transform: translateY(-100%); }
}
@keyframes goDown {
? from { transform: translateY(-100%); }
}
@-webkit-keyframes scaleUpFrom {
? from { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleUpFrom {
? from { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleUpFrom {
? from { opacity: 0; transform: scale(1.5); }
}
@-webkit-keyframes scaleUpTo {
? to { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleUpTo {
? to { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleUpTo {
? to { opacity: 0; transform: scale(1.5); }
}
圖片素材：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/owl.theme.css" />
<link rel="stylesheet" href="css/owl.transitions.css" />
<style type="text/css">
#owl-demo .item img {
/*設(shè)置display為block塊級，寬度為百分之百，高度自適應(yīng)*/
display: block;
width: 100%;
height: auto;
}
#bar {
width: 0%;
max-width: 100%;
height: 4px;
background: #7fc242;
}
#progressBar {
width: 100%;
background: #EDEDED;
}
</style>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" srcc="js/owl.carousel.js" ></script>
<script>
$(function(){
var time = 2.7;//初始化時(shí)間
var $progressBar,
? ? $bar,
? ? $elem,
? ? isPause,
? ? tick,
? ? percentTime;
var owl = $('#owl-demo');
//初始化輪播圖片
owl.owlCarousel({
slideSpeed: 1000,
paginationSpeed: 500,
autoPlay: 3000,
singleItem: true,
transitionStyle: "goDown",
afterInit: progressBar, //初始化之后調(diào)用progressBar()方法
afterMove: moved, //移動之后調(diào)用moved()方法
startDragging: pauseOnDragging //拖動調(diào)用pauseOnDragging()方法
});
//給id為owl-demo的div初始化進(jìn)度條
function progressBar(elem){
$elem = elem;
//建立進(jìn)度條元素，調(diào)用buildProgressBar()方法
buildProgressBar();
//開始計(jì)數(shù)，調(diào)用start()方法
start();
}
//create div#progressBar and div#bar then prepend to $("#owl-demo")
function buildProgressBar() {
$progressBar = $("<div>", {
id: "progressBar"
});
$bar = $("<div>", {
id: "bar"
});
$progressBar.append($bar).prependTo($elem);
}
function start() {
//重置計(jì)時(shí)器
percentTime = 0;
isPause = false;
//每0.01秒間隔運(yùn)行
tick = setInterval(interval, 10);
};
function interval() {
if(isPause === false) {
percentTime += 1 / time;
$bar.css({
width: percentTime + "%"
});
//如果 percentTime 大于或等于100時(shí)
if(percentTime >= 100) {
//滑動到下一張圖片?
$elem.trigger('owl.next')
}
}
}
//暫停拖動
function pauseOnDragging() {
isPause = true;
}
//移動回調(diào)函數(shù)
function moved() {
//清除定時(shí)器
clearInterval(tick);
//重新開始定時(shí)
start();
}
})
</script>
</head>
<body>
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><img src="img/fullimage1.jpg" /></div>
<div class="item"><img src="img/fullimage2.jpg" /></div>
<div class="item"><img src="img/fullimage3.jpg" /></div>
<div class="item"><img src="img/fullimage4.jpg" /></div>
<div class="item"><img src="img/fullimage5.jpg" /></div>
<div class="item"><img src="img/fullimage6.jpg" /></div>
<div class="item"><img src="img/fullimage7.jpg" /></div>
</div>
</body>
</html>
遠(yuǎn)程調(diào)用js：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$('#btn').click(function(){
$.getScript('http://localhost:8080/J190802/js/my.js');
});
})
</script>
</head>
<body>
<input type="button" value="遠(yuǎn)程調(diào)用js" id="btn" />
</body>
</html>
————————————————————
package com.SSHC.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
?* Servlet implementation class DemoServlet
?*/
@WebServlet("/ds")
public class DemoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
? ? ? ?
? ? /**
? ? ?* @see HttpServlet#HttpServlet()
? ? ?*/
? ? public DemoServlet() {
? ? ? ? super();
? ? ? ? // TODO Auto-generated constructor stub
? ? }
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
String act = request.getParameter("act");
System.out.println(act);
String pwd = request.getParameter("pwd");
System.out.println(pwd);
//String data = "{\"name\":\"Tom\",\"age\":19}";
//String data = "[\"bar\",\"foo\",\"mee\"]";
String data = "Hello world";
//將data字符串回寫到ajax的回調(diào)函數(shù)中
response.setCharacterEncoding("utf-8");
response.getWriter().write(data);
}
}
//http://localhost:8888/J190802/js/demo.js
$('#myDiv').css('background-color','red');
alert('Hello world? ? I am SSHC');
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
? ? String path = request.getContextPath();
? ? String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? ? <head>
? ? ? ? <base hreff="<%=basePath%>">
? ? ? ? <title></title>
? ? ? ? <meta http-equiv="pragma" content="no-cache">
? ? ? ? <meta http-equiv="cache-control" content="no-cache">
? ? ? ? <meta http-equiv="expires" content="0">
? ? ? ? <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
? ? ? ? <meta http-equiv="description" content="This is my page">
? ? ? ? <script type="text/javascript" srcc="js/jquery-1.11.0.js"></script>
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? $(function(){
? ? ? ? ? ? //頁面一運(yùn)行，就會提交這個ajax請求
? ? ? ? ? ? $.post('ds?a=1&b=2',{
? ? ? ? ? ? act:'詩書畫唱',
? ? ? ? ? ? pwd:456
? ? ? ? ? ? },function(res){
? ? ? ? ? ? //將json字符串轉(zhuǎn)換成js對象
? ? ? ? ? ? //var obj = JSON.parse(res);
? ? ? ? ? ? //alert(obj.name);
? ? ? ? ? ? //alert(obj.age);
? ? ? ? ? ? //for(var i = 0;i < obj.length;i ++){
? ? ? ? ? ? // alert(obj[i]);
? ? ? ? ? ? //}
? ? ? ? ? ? alert(res);
? ? ? ? ? ? });
? ? ? ? ? ? });
? ? ? ? </script>
? ? </head>
? ? <body>
? ? ? ?
? ? </body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
? ? String path = request.getContextPath();
? ? String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? ? <head>
? ? ? ? <base hreff="<%=basePath%>">
? ? ? ? <title></title>
? ? ? ? <meta http-equiv="pragma" content="no-cache">
? ? ? ? <meta http-equiv="cache-control" content="no-cache">
? ? ? ? <meta http-equiv="expires" content="0">
? ? ? ? <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
? ? ? ? <meta http-equiv="description" content="This is my page">
? ? ? ? <script type="text/javascript" srcc="js/jquery-1.11.0.js"></script>
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? $(function(){
? ? ? ? ? ? $('#btn').click(function(){
? ? ? ? ? ? $.getScript('js/my.js');
? ? ? ? ? ? });
? ? ? ? ? ? })
? ? ? ? </script>
? ? </head>
? ? <body>
? ? ? ? <input type="button" value="運(yùn)行指定的js腳本文件" id="btn" />
? ? </body>
</html>
單詞相關(guān)：
jQuery對Ajax做了大量的封裝，我們使用起來也較為方便，不需要去考慮瀏覽器兼容性。對于封裝的方式，jQuery采用了三層封裝：最底層的封裝方法為：$.ajax()，而通過這層封裝了第二層有三種方法：load()、$.get()和$.post()，最高層是$.getScript()和$.getJSON() 方法。?
load()方法包含三個參數(shù)：url(必須，請求的url 地址，參數(shù)類型為String)、 data(可選，發(fā)送的 key/value 數(shù)據(jù)，參數(shù)類型為Object)、callback(可選，成功或失敗的回調(diào)函數(shù)，參數(shù)類型為函數(shù) Function)。
url String 發(fā)送請求的地址?
type String 請求方式：POST 或 GET，默認(rèn) GET
timeout Number 設(shè)置請求超時(shí)的時(shí)間（毫秒）
data Object 或 String 發(fā)送到服務(wù)器的數(shù)據(jù)，鍵值對字符串或?qū)ο?/p>
dataType String 返回的數(shù)據(jù)類型，比如 html、xml、json 等
beforeSend Function 發(fā)送請求前可修改 XMLHttpRequest 對象的函數(shù)
complete Function 請求完成后調(diào)用的回調(diào)函數(shù)
success Function 請求成功后調(diào)用的回調(diào)函數(shù)
error Function 請求失敗時(shí)調(diào)用的回調(diào)函數(shù)
global Boolean 默認(rèn)為 true，表示是否觸發(fā)全局 Ajax
cache Boolean 設(shè)置瀏覽器緩存響應(yīng)，默認(rèn)為 true。如果 dataType 類型為 script 或 jsonp 則為 false。
content DOM 指定某個元素與這個請求相關(guān)所有回調(diào)函數(shù)的上下文?
contentType String 指定請求內(nèi)容的類型 。 默認(rèn)為 application/x-www-form-urlencoded
async Boolean 是否異步處理。默認(rèn)為true，false為同步處理
processData Boolean 默認(rèn)為 true，數(shù)據(jù)被處理為 URL 編碼格式。如 果為 false，則阻止將傳入的數(shù)據(jù)處理為 URL 編 碼的格式。?
dataFilter Function 用來篩選響應(yīng)數(shù)據(jù)的回調(diào)函數(shù)。
ifModified Boolean 默認(rèn)為false，不進(jìn)行頭檢測。如果為true，進(jìn)行頭檢測，當(dāng)相應(yīng)內(nèi)容與上次請求改變時(shí)，請求被認(rèn)為是成功的。
jsonp String 指定一個查詢參數(shù)名稱來覆蓋默認(rèn)的 jsonp 回調(diào) 參數(shù)名 callback。?
username String 在HTTP認(rèn)證請求中使用的用戶名
password String 在HTTP認(rèn)證請求中使用的密碼
scriptCharset String 當(dāng)遠(yuǎn)程和本地內(nèi)容使用不同的字符集時(shí)，用來設(shè) 置 script 和 jsonp 請求所使用的字符集。?
xhr Function 用來提供 XHR 實(shí)例自定義實(shí)現(xiàn)的回調(diào)函數(shù)
traditional Boolean 默認(rèn)為false，不使用傳統(tǒng)風(fēng)格的參數(shù)序列化。
用表單序列化方法serialize()，會智能的獲取指定表單內(nèi)的所有元素。這樣，在面對大量表單元素時(shí)，會把表單元素內(nèi)容序列化為字符串，然后再使用 Ajax 請求。
除了serialize()方法，還有一個可以返回 JSON 數(shù)據(jù)的方法：.serializeArray()。這個方法可以直接把數(shù)據(jù)整合成鍵值對的 JSON 對象。?
作業(yè)：
1、找一系列圖片，實(shí)現(xiàn)圖片輪播效果。
（答案在上面）
2、在HBUILDER中創(chuàng)建一個程序，讀取data.json中的內(nèi)容，并在頁面中的id為myDiv的div中顯示學(xué)生的姓名和性別為一個表格。解析JSON字符串在HTML上顯示成表格：
{"total":3,"rows":[
{"sname":"張三","sex":"女"},
{"sname":"李四","sex":"女"}.
{"sname":"小明","sex":"男"}
]}
{"total":3,"rows":[
{"sname":"詩書畫唱有點(diǎn)可愛","sex":"女"},
{"sname":"詩書畫唱有點(diǎn)帥","sex":"女"},
{"sname":"詩書畫唱有點(diǎn)酷","sex":"男"}
]}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(document).ready(function(){
? ? $.get("data/data.json",function(data,status){
? ? var s="<table border='1'><tr><th>學(xué)生姓名</th><th>學(xué)生性別</th></tr>";
? ? var arr=data.rows;
? ? for(i=0;i<arr.length;i++){
? ? sname=arr[i].sname;
? ? ? sex=arr[i].sex;
? ? s=s+"<tr><td>"+sname+"</td>";
? ? s=s+"<td>"+sex+"</td></tr>"
? ? }
? ? s=s+"</table>";
//alert("數(shù)據(jù)：" + s + "\n狀態(tài)：" + status);
? ? ? ?$("#bg").html(s)
? ? ??
? ? });
?
});
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>
3、在eclipse創(chuàng)建一個程序，創(chuàng)建一個jsp頁面，這個頁面一打開就會發(fā)送一個ajax請求，請求返回的數(shù)據(jù)是：[{"name":"湖南"},{"name":"江西"},{"name":"湖北"}]，請彈出數(shù)據(jù)中的所有省份名稱。
package com.SSHC.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
?* Servlet implementation class DemoServlet
?*/
@WebServlet("/ds")
public class DemoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
? ? ? ?
? ? /**
? ? ?* @see HttpServlet#HttpServlet()
? ? ?*/
? ? public DemoServlet() {
? ? ? ? super();
? ? ? ? // TODO Auto-generated constructor stub
? ? }
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
String act = request.getParameter("act");
System.out.println(act);
String pwd = request.getParameter("pwd");
System.out.println(pwd);
//String data = "{\"name\":\"Tom\",\"age\":19}";
//String data = "[\"bar\",\"foo\",\"mee\"]";
String data = "[{\"name\":\"湖南\"},{\"name\":\"江西\"},{\"name\":\"湖北\"}]";
//將data字符串回寫到ajax的回調(diào)函數(shù)中
response.setCharacterEncoding("utf-8");
response.getWriter().write(data);
}
}
<%@ page language="java" contentType=
"text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
? ? String path = request.getContextPath();
? ? String basePath = request.getScheme()+
? ??"://"+request.getServerName()
? ??+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? ? <head>
? ? ? ? <base hreff="<%=basePath%>">
? ? ? ? <title></title>
? ? ? ? <meta http-equiv="pragma" content="no-cache">
? ? ? ? <meta http-equiv="cache-control" content="no-cache">
? ? ? ? <meta http-equiv="expires" content="0">
? ? ? ? <meta http-equiv="keywords" content="keyword1,
? ? ? ? keyword2,keyword3">
? ? ? ? <meta http-equiv="description" content=
? ? ? ? "This is my page">
? ? ? ? <script type="text/javascript"
? ? ? ? ?src="js/jquery-1.11.0.js"></script>
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? $(function(){
? ? ? ? ? ??//頁面一運(yùn)行，就會提交這個ajax請求
? ? ? ? ? ??$.post('ds?a=1&b=2',{
? ? ? ? ? ??act:'詩書畫唱',
? ? ? ? ? ??pwd:456
? ? ? ? ? ??},function(res){
? ? ? ? ? ??//將json字符串轉(zhuǎn)換成js對象
? ? ? ? ? ??var obj = JSON.parse(res);
? ? ? ? ? ??var s=" ";
? ? ? ? ? ??for(var i = 0;i < obj.length;i ++){
? ? ? ? ? ??name=obj[i].name;
? ? ? ? ? ??s=s+"? ?"+name+"? ?";
? ? ? ? ? ??}
? ? ? ? ? ??alert(s);
? ? ? ? ? ??});
? ? ? ? ? ? });
? ? ? ? </script>
? ? </head>
? ? <body>
? ? ? ?
? ? </body>
</html>
——————
遍歷JSON字符串：
<script>
var json = [{dd:'SB',AA:'東東',re1:123},{cccc:'dd',lk:'1qw'}];
for(var i=0,l=json.length;i<l;i++){
for(var key in json[i]){
alert(key+':'+json[i][key]);
}
}
</script>
https://www.baidu.com/link?url=iuX5i6iRZTOgMcLEVZY5qdz1JjmD190ZKhbfUUIuEdwJ2plMBfcK39BqFAThhMtPXdrHitPiKrwkRuusHmTu74ssazl7heiZuB1kAXGh0c7&wd=&eqid=db10ae340011cbeb000000065fb710cd
