Ajax (和db的應用)

檔名：demo.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>AJAX Demo</title>

<script type="text/javascript" src="jquery.js"></script>

Ajax (和db的應用)

檔名：demo.html

​<script language="javascript">

$(document).ready( function() {

  $('#choice').change(function()

    {    $('#myDivElement').html('Loading...');

        $.ajax({

            url: 'list_by_address.php',

            data:

            {    code: $('#choice').val()      },

            type: 'GET',

            dataType: 'html',

Ajax (和db的應用)

檔名：demo.html

            success: function(data,textStatus,jqXHR)            {

                $('#myDivElement').html(data);

            },

            error: function()

            {          $('#myDivElement').html('error !');           },

            complete: function()

            {      // nothing to do            }

        });

    });

} );

</script>

Ajax (和db的應用)

檔名：demo.html

</head>

<body>

  Code:

  <select name="e_code" id="choice">

    <option>請選擇地區</option>

    <option>台北</option>

    <option>桃園</option>

    <option>新竹</option>

    <option>台中</option>

    <option>台南</option>

    <option>宜蘭</option>

Ajax (和db的應用)

檔名：demo.html


    <option>台南</option>

    <option>花蓮</option>

    <option>高雄</option>

  </select>

 

  <div id="myDivElement" style="background-color:#AAFFCC;"></div>

 

</body>

</html>

Ajax (和db的應用)

檔名：ist_by_address.php

<?php
include "config.php";

$code = isset($_GET["code"]) ? $_GET["code"] : "";

// 連接資料庫
$link = db_open();
// 寫出 SQL 語法
$sqlstr = "SELECT * FROM person ";
$sqlstr .= "WHERE address='" . $code . "' ";

// 執行SQL及處理結果
$result = @mysqli_query($link, $sqlstr);
$total_rec = mysqli_num_rows($result);
$data = '';

Ajax (和db的應用)

檔名：ist_by_address.php

while($row=mysqli_fetch_array($result))
{
   $uid      = $row["uid"];
   $username = $row["username"];
   $address  = $row["address"];
   $birthday = $row["birthday"];
   $height   = $row["height"];
   $weight   = $row["weight"];
   
 $data .= <<< HEREDOC
 <TR>
 <TD>{$username}</TD>
 <TD>{$address}</TD>

Ajax (和db的應用)

檔名：ist_by_address.php

 <TD>{$birthday}</TD>
 <TD>{$height}</TD>
 <TD>{$weight}</TD>
</TR>
HEREDOC;
}

$html = <<< HEREDOC
<TABLE border="1" align="center">
<TR>
<TH>姓名</TH>
 <TH>地址</TH>
<TH>生日</TH>
<TH>身高</TH>

Ajax (和db的應用)

檔名：ist_by_address.php


 <TH>體重</TH>
 </TR>
{$data}
</TABLE>
HEREDOC;

echo $html;
?>