目前分類:PHP & AJAX (2)

瀏覽方式: 標題列表 簡短摘要

 

(1) AJAX 筆記

 

(1) jQuery 程式碼由 $ (或jQuery) 開始 → 後面會接著圓刮號「()」→ 而圓刮號裡面的參數是你想叫 jQuery 幫你找什麼
(2) ('#元素名') → 接著是你想叫 jQuery 執行什麼動作 (或處理事件)。例如:$('#el').click(function() {   });

JQuery 有三種存取元素方式:

tag selector

在 jQuery 中

$('a'); // 取得頁面中所有的 <a> 標籤元素

id selector

在 jQuery 中

$('#el'); // 取得 id 為 el 的元素

class selector

在 jQuery 中

$('.item'); // 取得 class name 為 item 的所有元素

 

jQuery 對於 HTML Tag 屬性的操作 (Attributes)

 

取得選取到的元素之屬性值:

 

.attr(attributeName)

 

例如,取得第一個連結的 title 值:

 

$('a').attr('title');

 

Value - Getter/Setter

 

val,一個很常用到的方法,用來取得和設定表單元素的 value 值:

 

.val() // get
.val(value) // set

 

jQuery 對於樣式的操作 (CSS)

取得第一個匹配到的元素之樣式:

.css(propertyName)

例如,取得第一個段落的字體顏色:

$('p').css('color'); 

 

 

jQuery 事件處理 (Events)

所有段落觸發 click 事件時,將背景顏色改為藍色:

$('p').click(function() {
  $(this).css('background-color', 'blue');
});

事件處理函數中的 this 為被觸發的「DOM元素」,而非 jQuery 物件。

jQuery 的 event object

對於所有的 jQuery event handler,你都能傳入一個參數作為 event 物件,如下例:

$(document).click(function(event) {
  alert(event.pageX);
});
 

jQuery 效果 (Effects)

基本的 (Basics)

.show([duration] [, complete])

.hide([duration] [, complete])

參考文章:

http://www.fooish.com/jquery/

 

(2) JS 筆記

 

(3) HTML 筆記

HTTP 請求方法(GET 與 POST)

GET

 傳遞參數(name=value)都在 URL 中,任何人都可見
  • 適用於資訊獲取(查詢結果)
  • 使用 URL 傳遞參數(name=value)
  • 對所發送資訊的數量有限制,一般在 2,000 個字串

POST

 傳遞參數(name=value)不可見
  • 適用於修改伺服器上的資料
  • 所有傳遞的參數(name=value)將被嵌入 HTTP 的請求主體(body)
  • 對所發送資訊的數量無限制
文章標籤

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

AJAX 範例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>  
    <TITLE>HIV REVIEW System</TITLE>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />   
    <title> ref </title>  
    <link rel="stylesheet" type="text/css" href="kktext.css" media="screen" />
    <! ------- must care the path --------------------------------------------!>
    <script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="./js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </script>
    <! --we can check using the google crome debug tools -------------------------!>

    <script type="text/javascript">
     function nothing() { 
      alert("查無任何資料,請重新查詢");
      window.location.href = "..\\1090.php";
     }
    </script>

$(document).ready(function () {

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

$.ajax({

url: 'hello.php',

cache: false,

dataType: 'html',

type:'GET',

data: { name: $('#name').val()},

error: function(xhr) {

alert('Ajax request 發生錯誤');

},

success: function(response) {

$('#msg').html(response);

$('#msg').fadeIn();}

});

});

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

$('#msg').html("");

// document.getElementById('msg').innerHTML = "";

}); 

function btnAjax(para,row) {         
       $.ajax({
                   type: "post",
                   url: "db1092.php?hosp_id="+para,
                   dataType:"text",
                   async: false,
                   cache: false,
                   contentType: "application/json; charset=big5",
                   success: function(response) {                 
                   response = "Data Saved!"
                   alert(response);
                   $("#msg").css({'color':'red','font-size':'40px'});                 
                   $(btnConRow).attr( "disabled",true );                  
                 }
        });           
   }    


  </head>

<Body>
     <input type ="button" value="submit" onClick="nothing"></input> <br>
     <div id='msg' style="text-align:center;font-size:20px;">       
     </div>
</Body>


</html> 


 

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

Close

您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

reload

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼