AJAX 功課, 初學 AJAX ... ( JQuery )

編寫、設計網頁與程式。

版主: hamu278, 銘仔

版面規則
  • 本版面亦可以討論網頁寄存公司

AJAX 功課, 初學 AJAX ... ( JQuery )

文章lsp » 2008-12-24, 10:13

想將佢變成 AJAX ...
上面 D AJAX 係亂來既 ... 試野的說 ...
但完全唔 Work ... 諗住 Toggle 下個 submit botton 都唔得 :oops:
我諗如果識 ajax 既人想寫一個加減數既應該唔難, 所以想響度請教, 我搵 Example 又搵唔到 d 咁簡單既
( 用 JQuery 的說 )
代碼: 選擇全部
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>計算兩數的和(傳統PHP版)</title>
  <script type="text/javascript" src="./jquery.js"></script>
  <script type="text/javascript">
  <!--
  $(document).ready(
   function () {
      $("botton #sum").click(
         function () {
            $(this).slideUp();
         }
      );
   }
  );
  -->
  </script>
</head>
<body>
  <form method="post" action="javascript:void(null);">
  <input type="text" size="3" name="num1" id="num1">+
  <input type="text" size="3" name="num2" id="num2">
  <button type="submit" id="sum">=</button>
  <span> <!-- 顯示計算結果的位置, 第一次瀏覽只會看到問號 -->
    <?php
    // 若表單送回 'num1' 和 'num2 兩個欄位的內容
    if(isset($_POST['num1']) && isset($_POST['num2']))
      echo $_POST['num1']+$_POST['num2'];  // 輸出兩數的和
    else
      echo '?';  // 第一次瀏覽只會看到問號
    ?>
  </span>
  <hr />
  <p>加法是基本的算術運算之一, 加法是將二個以上的數字合成一個數字, 其稱結果稱為和。
  表達加法的符號為加號(+)。加法是簡單的動作, 幼兒及有些動物也都能使用加法。</p>
  <p>加法滿足交換律與結合律:
  <ul>
    <li>交換律:參與加法的數字對調, 結果不變, 例如 A+B=B+A。</li>
    <li>結合律:在有多個數字的加法運算中, 各組加法執行的順序改變, 結果不變, 例如 (A+B)+C=A+(B+C)。</li>
  </ul>
  </p>
</body>
</html>
您沒有權限檢視這篇文章所附加的檔案。
頭像
lsp
地球會員
 
文章: 1374
註冊時間: 2008-02-07, 11:58

Re: AJAX 功課, 初學 AJAX ... ( JQuery )

文章bananasims » 2008-12-24, 10:17

代碼: 選擇全部
   function () {
      $("botton #sum").click(
         function () {
            $(this).slideUp();
         }
      );
   }


代碼: 選擇全部
function() { }

做乜?
影像.從心 At the heart of the ímage
bananasims
太陽會員
 
文章: 13541
註冊時間: 2005-09-22, 00:00

Re: AJAX 功課, 初學 AJAX ... ( JQuery )

文章lsp » 2008-12-24, 10:32

? 唔明你講嘜 ? :oops:
頭像
lsp
地球會員
 
文章: 1374
註冊時間: 2008-02-07, 11:58

Re: AJAX 功課, 初學 AJAX ... ( JQuery )

文章bananasims » 2008-12-24, 10:34

代碼: 選擇全部
function() { }

無意義的
影像.從心 At the heart of the ímage
bananasims
太陽會員
 
文章: 13541
註冊時間: 2005-09-22, 00:00

Re: AJAX 功課, 初學 AJAX ... ( JQuery )

文章lsp » 2008-12-24, 10:40

唔知啊 ...
我見好多教學都係咁寫 :oops:
咁如果 要 sildeUp 應該要點做
頭像
lsp
地球會員
 
文章: 1374
註冊時間: 2008-02-07, 11:58

Re: AJAX 功課, 初學 AJAX ... ( JQuery )

文章bananasims » 2008-12-24, 10:59

.slideUp()
影像.從心 At the heart of the ímage
bananasims
太陽會員
 
文章: 13541
註冊時間: 2005-09-22, 00:00

Re: AJAX 功課, 初學 AJAX ... ( JQuery )

文章lsp » 2008-12-24, 11:07

bananasims 寫:.slideUp()

... 哦 ... 你講呢度
但係我想要整加減數 :oops:
我想問要 echo 野出來 JQuery 係點搞 ? :oops:
即係
<botton onclick="document.write("Something"+"Result");">I'm a botton</botton>
頭像
lsp
地球會員
 
文章: 1374
註冊時間: 2008-02-07, 11:58

Re: AJAX 功課, 初學 AJAX ... ( JQuery )

文章bananasims » 2008-12-24, 11:23

代碼: 選擇全部
.append('xxx')
影像.從心 At the heart of the ímage
bananasims
太陽會員
 
文章: 13541
註冊時間: 2005-09-22, 00:00

Re: AJAX 功課, 初學 AJAX ... ( JQuery )

文章lsp » 2008-12-25, 15:44

我想問 JQuery 點 Debug ( Error 都唔出多個 ... )
代碼: 選擇全部
  <script type="text/javascript">
  <!--
   $(document).ready(
      function(){
         $("#sum").click(
            fucntion(){
               $("#yo").hide("slow");
            }
         );
      }
   );
  -->
  </script>

禁左個制無反應 ...
如果
代碼: 選擇全部
  <script type="text/javascript">
  <!--
   $(document).ready(
      function(){
               $("#yo").hide("slow");
      }
   );
  -->
  </script>

就咁, 唔加 .click 就得, 即係 .click 果段野有問題, 但係諗極都唔明 :cry:
--- 講番之前, JQuery 既 example 都係咁
--- http://docs.jquery.com/Events/click
頭像
lsp
地球會員
 
文章: 1374
註冊時間: 2008-02-07, 11:58

Re: AJAX 功課, 初學 AJAX ... ( JQuery )

文章bananasims » 2008-12-25, 15:51

代碼: 選擇全部
function() { }

無用架
仲有要係喺 ID = yo 既 element 咁先有效
影像.從心 At the heart of the ímage
bananasims
太陽會員
 
文章: 13541
註冊時間: 2005-09-22, 00:00

Re: AJAX 功課, 初學 AJAX ... ( JQuery )

文章lsp » 2008-12-26, 14:53

bananasims 寫:
代碼: 選擇全部
function() { }

無用架
仲有要係喺 ID = yo 既 element 咁先有效

但我見 D example 都係咁 ...
不過唔知有嘜用 ...
不過我琴晚搞掂左了 ... 果個 加減數, 我上面唔得係因為打錯字 :oops:
function function :oops:
頭像
lsp
地球會員
 
文章: 1374
註冊時間: 2008-02-07, 11:58

Re: AJAX 功課, 初學 AJAX ... ( JQuery )

文章lsp » 2008-12-26, 16:37

我想問一下, 如果我想整一個 Del data 既 AJAX + PHP + MySQL 既網 ...
AJAX ( JQuery )
代碼: 選擇全部
<script type="text/javascript">
$(document).ready(function(){                     
   $(".CM .delete").click(function(){
      $(this).parents(".CM").animate({ opacity: 'hide' }, "slow");
   });

});
</script>

Data In HTML:
代碼: 選擇全部
<div class="CM">
Author : User<br/>
Email : UserA@user.com<br/>
Birthday : 2008-05-30<br/>
Comment : <br/>Edited ~<br/>
<a class="delete" href="?action=Del_CM&amp;CM_Time=2008-12-26+15%3A54%3A51">Del This CM</a> <a href="?action=Edit_CM&amp;CM_Time=2008-12-26+15%3A54%3A51">Edit This CM</a><div align="right">2008-12-26 15:54:51</div><hr/></div>
<div class="CM">
Author : Admin<br/>
Email : Demo@gmail.com<br/>
Birthday : 1954-09-28<br/>
Comment : <br/>A ~ B ~ <br/>
<div align="right">2008-12-26 15:35:56</div><hr/></div>

衣家差一步就係點樣響佢 hide ( 用 AJAX - JQuery Hide ) 既時候,
做埋 響 MySQL 個 Database 度 Del Data ?
PHP Del Data Code :
代碼: 選擇全部
$sql = 'SELECT author FROM `gb_comment` WHERE posttime = \''.$_GET['CM_Time'].'\'';
$del_sql = 'DELETE FROM `gb_comment` WHERE `gb_comment`.`posttime` = \''.urldecode($_GET['CM_Time']).'\'';
$result = @mysqli_query($cid, $sql);
$rows = mysqli_num_rows($result);
echo (!$rows) ? 'The CM has not exists.<br />' : '';
   if($_SESSION['Name'] == $rows['author'] || $_SESSION['is_admin'] == 1){
      $del_result = @mysqli_query($cid, $del_sql);
      echo ($del_result) ? 'The CM has been Deleted.<br />' : 'The CM has not exists.<br />';
   }
頭像
lsp
地球會員
 
文章: 1374
註冊時間: 2008-02-07, 11:58

Re: AJAX 功課, 初學 AJAX ... ( JQuery )

文章hkh » 2008-12-31, 00:32

代碼: 選擇全部
<script type="text/javascript">
$(document).ready(function(){                     
   $(".CM .delete").click(function(){
      $(this).parents(".CM").animate({ opacity: 'hide' }, "slow");
      $.ajax({
         url: 'del.php',
         type: 'GET',
         dataType: 'xml',
         timeout: 1000,
         error: function(){
            alert('Error loading');
         },
         success: function(cont){
            $('').html($(cont));   //<- Show the result
         }
      });
   });
});
</script>
頭像
hkh
土星會員
 
文章: 57
註冊時間: 2008-03-21, 20:01


回到 [B1] 網頁製作、程式編寫與介面設計



誰在線上

正在瀏覽這個版面的使用者:沒有註冊會員 和 31 位訪客

cron