Bug倉庫 // 程式日記

9月 14 週四 201716:49
使用jQuery的$.post實作與php的Ajax，運用form的serialize()方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form id="form">
會員帳號<input type="text" name="mem"><br>
會員密碼<input type="password" name="psw"><br>
email<input type="email" name="email">
<input type="submit" value="送出">
</form>
<div id="result"></div>
<script type="text/javascript">
$('#form').submit(function(e){
e.preventDefault();
$.post('0914-4.php',$('#form').serialize(),function(rs){
$('#form').hide();
$('#result').html(rs);
})
});
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(0)

個人分類：jQuery

▲top

9月 14 週四 201716:49
使用jQuery的$.post實作與php的Ajax，運用form的serialize()方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form id="form">
會員帳號<input type="text" name="mem"><br>
會員密碼<input type="password" name="psw"><br>
email<input type="email" name="email">
<input type="submit" value="送出">
</form>
<div id="result"></div>
<script type="text/javascript">
$('#form').submit(function(e){
e.preventDefault();
$.post('0914-4.php',$('#form').serialize(),function(rs){
$('#form').hide();
$('#result').html(rs);
})
});
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(431)

個人分類：jQuery

▲top

9月 14 週四 201716:36
使用jQuery的$.get實作與php的Ajax

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
a{
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li><a data-index="1">第1個</a></li>
<li><a data-index="2">第2個</a></li>
<li><a data-index="3">第3個</a></li>
</ul>
<div id="result"></div>
<script type="text/javascript">
$('a').click(function(){
$.get('0914-3.php','select='+$(this).data('index'),function(rs){
$('#result').html(rs);
});
})
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(0)

個人分類：jQuery

▲top

9月 14 週四 201716:36
使用jQuery的$.get實作與php的Ajax

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
a{
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li><a data-index="1">第1個</a></li>
<li><a data-index="2">第2個</a></li>
<li><a data-index="3">第3個</a></li>
</ul>
<div id="result"></div>
<script type="text/javascript">
$('a').click(function(){
$.get('0914-3.php','select='+$(this).data('index'),function(rs){
$('#result').html(rs);
});
})
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(93)

個人分類：jQuery

▲top

9月 14 週四 201715:11
JSONP，使用網址列後面加callback方式叫出JSON物件

1.伺服端建立資料代理程式（代理proxy）：
伺服端語言：asp.net、php、nodejs、ruby

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(238)

個人分類：Javascript

▲top

9月 14 週四 201715:11
JSONP，使用網址列後面加callback方式叫出JSON物件

1.伺服端建立資料代理程式（代理proxy）：
伺服端語言：asp.net、php、nodejs、ruby

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(0)

個人分類：Javascript

▲top

9月 14 週四 201712:30
Ajax使用XMLHttpRequest物件的寫法(資料來源是JSON)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.meal{
border: 1px solid #aaa;
padding: 20px;
display: inline-block;
}
</style>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
/*下面的open設定好，send過去後，
這個XMLHttpRequest物件的onload事件就會被觸發*/
xhr.onload=function(){
if(xhr.status===200){
/*全域變數不用宣告*/
responseObj=JSON.parse(xhr.responseText);
var DOMElement='';
for (var i = 0; i < responseObj.meals.length; i++) {
DOMElement+=
'<div class="meal"> <h2>主餐：'+responseObj.meals[i].main+'</h2> <h3>飲料：'+responseObj.meals[i].beverage+'</h3> <img src="'+responseObj.meals[i].pic+'"> <h2>價格：'+responseObj.meals[i].price+'</h2> </div>'
}//for
document.getElementById('content').innerHTML=DOMElement;
}//if
}//function
/*HTTP處理方法是GET，資料網址，指定資料傳輸模式*/
xhr.open('GET','data/0914.json',true);
/*無額外資訊發送*/
xhr.send(null);
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(88)

個人分類：Javascript

▲top

9月 14 週四 201712:30
Ajax使用XMLHttpRequest物件的寫法(資料來源是JSON)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.meal{
border: 1px solid #aaa;
padding: 20px;
display: inline-block;
}
</style>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
/*下面的open設定好，send過去後，
這個XMLHttpRequest物件的onload事件就會被觸發*/
xhr.onload=function(){
if(xhr.status===200){
/*全域變數不用宣告*/
responseObj=JSON.parse(xhr.responseText);
var DOMElement='';
for (var i = 0; i < responseObj.meals.length; i++) {
DOMElement+=
'<div class="meal"> <h2>主餐：'+responseObj.meals[i].main+'</h2> <h3>飲料：'+responseObj.meals[i].beverage+'</h3> <img src="'+responseObj.meals[i].pic+'"> <h2>價格：'+responseObj.meals[i].price+'</h2> </div>'
}//for
document.getElementById('content').innerHTML=DOMElement;
}//if
}//function
/*HTTP處理方法是GET，資料網址，指定資料傳輸模式*/
xhr.open('GET','data/0914.json',true);
/*無額外資訊發送*/
xhr.send(null);
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(0)