Ajax呼叫php存取mysql回傳JSON顯示的基本範例

2016-06-10 jashliao Comments 0 Comment

Ajax呼叫php存取mysql回傳JSON顯示的基本範例

ajax_php.sql

— phpMyAdmin SQL Dump
— version 4.0.4.2
— http://www.phpmyadmin.net
—
— 主機: localhost
— 產生日期: 2016 年 06 月 10 日 13:30
— 伺服器版本: 5.6.13
— PHP 版本: 5.4.17

SET SQL_MODE = “NO_AUTO_VALUE_ON_ZERO”;
SET time_zone = “+00:00”;

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

—
— 資料庫: `ajax_php`
—
CREATE DATABASE IF NOT EXISTS `ajax_php` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `ajax_php`;

— ——————————————————–

—
— 表的結構 `data`
—

CREATE TABLE IF NOT EXISTS `data` (
`id` int(6) unsigned NOT NULL AUTO_INCREMENT,
`value` varchar(30) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

—
— 轉存資料表中的資料 `data`
—

INSERT INTO `data` (`id`, `value`) VALUES
(1, ‘test01’),
(2, ‘test02’);

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

api.php

<?php

//————————————————————————–
// Example php script for fetching data from mysql database
// by Trystan Lea : openenergymonitor.org : GNU GPL
//————————————————————————–

$tableName = “data”;

//————————————————————————–
// 1) Connect to mysql database
//————————————————————————–
include(‘conn.php’);

//————————————————————————–
// 2) Query database for data
//————————————————————————–
$result = mysql_query(“SELECT * FROM $tableName”); //query
$array = mysql_fetch_row($result); //fetch result

//————————————————————————–
// 3) echo result as json
//————————————————————————–
echo json_encode($array);

conn.php

<?php
/*****************************
*数据库连接
*****************************/
$conn = @mysql_connect(“localhost”,”root”,”usbw”);
if (!$conn){
die(“資料庫連接失敗：” . mysql_error());
}
mysql_select_db(“ajax_php”, $conn);
mysql_query(“set character set ‘utf8′”);
mysql_query(‘set names utf8’);
?>

index.php

<!———————————————————————————————
Example client script for JQUERY:AJAX -> PHP:MYSQL example
by Trystan Lea : openenergymonitor.org : GNU GPL

I recommend going to http://jquery.com/ for the great documentation there about all of this
———————————————————————————————->
<html>
<head>
<script language=”javascript” type=”text/javascript” src=”jquery.js”></script>
</head>
<body>

<!———————————————————————————————
1) Create some html content that can be accessed by jquery
———————————————————————————————->
<h2> Client example </h2>
<h3>Output: </h3>
<div id=”output”>this element will be accessed by jquery and this text will be replaced</div>

<script id=”source” language=”javascript” type=”text/javascript”>

$(function ()
{

//——————————————————————————————-
// 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
//——————————————————————————————-
$.ajax({
url: ‘api.php’, //the script to call to get data
data: “”, //you can insert url argumnets here to pass to api.php for example “id=5&parent=6”
dataType: ‘json’, //data format
success: function(data) //on recieve of reply
{
var id = data[0]; //get id
var vname = data[1]; //get name
//————————————————————————————–
// 3) Update html content
//————————————————————————————–
$(‘#output’).html(“<b>id: </b>”+id+”<b> name: </b>”+vname); //Set output element html
//recommend reading up on jquery selectors they are awesome http://api.jquery.com/category/selectors/
}
});

});
</script>

</body>
</html>