close

分享連結 : http://learn-x.blogspot.tw/2013/05/jquery-ajax.html

Jquery ajax 簡單範例(以PHP為例)

 
在實際開發網站時，ajax是經常被使用到的技巧，而jquery提供了一項簡單實現的方法，不囉嗦，直接看範例:

1.php的部分(desc.php)
我們預期它回覆一段文字

?
1
2
3
<?php
  echo "想要回覆的訊息!!!";
?>
2.html及javascript的部分(ajax.html) 
?
1
2
3
4
5
6
7
8
//引入jquery
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $.ajax({
  url: "desc.php",
  type: "GET", //依實際使用情況可換成POST，省略則為GET
 });
</script>

這樣就行了嗎?是的，就是這麼簡單，僅僅幾行desc.php能夠收到ajax請求了 ，但我們如何檢驗呢?我們將程式碼改寫一下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $.ajax({
    url: "desc.php",
    type: "GET",
    success: function(response) {
      console.log(response); //預期回覆:想要回覆的訊息!!!
    },
    error: function() {
      console.log("ajax error!");
    }
 });
</script>

假設情境:我們當然不可能沒事使用ajax，通常都會有所需求，因此要求參數要怎麼做呢? 這次我們加入參數，並將回傳內容顯示在某個div容器中
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $.ajax({
    url: "desc.php?id=123",
    type: "GET",
    success: function(response) {
      $('#div_name').html(response);
    },
    error: function() {
      console.log("ajax error!");
    }
 });
</script>
<div id="div_name"></div>
這樣就是最標準的GET傳遞了!有沒有覺得很熟悉? 而php的部分則改寫成這樣:
?
1
2
3
4
5
<?php
  if(isset($_GET['id'])){
    echo "我收到請求了";
  }
?>
順利的話，你的網頁將成功透過Jquery ajax方法完成一次請求，並回傳訊息顯示於id名為div_name的div之中 若是多個參數你也可以這樣下:
?
1
2
3
4
5
6
7
<script type="text/javascript">
 $.ajax({
    url: "desc.php",
    type: "GET",
    data: { id: "123", state: "1" }//以逗點區隔
 });
</script>
更進階的話，可以使用jquery的.serialize()或是參數使用json格式 請自行參考其他高手的教學囉~小弟我獻醜了! 下一篇我將介紹其他的東東。
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 聆六禽 的頭像
    聆六禽

    聆六禽的部落格

    聆六禽 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄