有段時(shí)間沒有發(fā)表文章了，這篇文章是本人從自己微信公眾號(hào)截出來的，用以彌補(bǔ)一下空白，哈哈。
PHP開發(fā)環(huán)境有很多，這里用我的來講，筆者用的是PhpStorm+Xampp,
先打開XAMPP，這是平臺(tái)環(huán)境，需要使用它集成的apache和mysql。
打開XAMPP后啟動(dòng)apache和mysql
運(yùn)行mySql
點(diǎn)擊Shell運(yùn)行工具，登陸命令:mysql -u root -p，root是開始時(shí)默認(rèn)的用戶名，默認(rèn)用戶密碼為空。
由于mysql后面被并購了，所以后面的版本是MariaDB,但是MariaDB保留了Mysql的功能，所以Mysql的操作還是行的通的。
show databases，顯示所有數(shù)據(jù)庫，這里筆者已經(jīng)創(chuàng)建好數(shù)據(jù)庫test了。創(chuàng)建命令是CREATE DATABASE test;創(chuàng)建表是CREATE TABLE。
對(duì)于不了解數(shù)據(jù)庫操作的也可以使用視圖化操作，瀏覽器輸入：http://localhost/phpmyadmin/會(huì)打開管理視圖。
test數(shù)據(jù)庫websites表的結(jié)構(gòu)如下圖，因?yàn)閤ampp的mysql的表結(jié)構(gòu)設(shè)置不了自增長id，所以筆者是用sql命令創(chuàng)建的。讀者可以不設(shè)置id。
下面講解php代碼連接，一般ajax連接另一個(gè)地址會(huì)報(bào)錯(cuò)：跨域錯(cuò)誤，這是一種保護(hù)行為，不讓外部代碼輕易訪問公司數(shù)據(jù)庫。我們自己訪問就需要做一個(gè)跨域，跨域有很多種方法，這里說的僅是PHP后臺(tái)設(shè)置可跨域：就是在頭部加入
header("Access-Control-Allow-Origin:*");*代表所有網(wǎng)站都可以訪問，也可以設(shè)置固定地址。
筆者的PHP代碼有詳細(xì)注釋，所以這里直接貼代碼了。
<?php
header("Access-Control-Allow-Origin:*");//此處使網(wǎng)站可以進(jìn)行跨域訪問
header("Content-Type:application/json;charset=UTF-8");
//此處聲明返回的是json類型及字符集為utf-8
$servername = "localhost"; //服務(wù)器
$username = "root"; //用戶名
$password = ""; //密碼
$dbname = "test"; //數(shù)據(jù)庫
// 創(chuàng)建連接
$conn = new mysqli($servername, $username, $password,$dbname);
//設(shè)置編碼，防止中文混亂
$conn->query("set names 'utf-8'");
// 檢測連接
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
// 創(chuàng)建數(shù)據(jù)庫查詢語句
$sql = "select * from websites";
//接收查詢結(jié)果
$result = $conn->query($sql);
$json ="";
$data =array(); //定義好一個(gè)數(shù)組.PHP中array相當(dāng)于一個(gè)數(shù)據(jù)字典.
//定義一個(gè)類,用到存放從數(shù)據(jù)庫中取出的數(shù)據(jù)
class websites
{
public $weibsitename ;
public $weibsiteurl ;
public $country ;
}
if (isset($_POST['code']) && $_POST["code"] == 1){ //如果code存在且等于1,創(chuàng)立條件，這只是個(gè)簡單的例子，所以用code==1來判斷
//判斷是否存在數(shù)據(jù)
if($result->num_rows > 0){
//依次按字段遍歷取出元素
while($row = $result->fetch_array()){
$websites =new websites();
$websites->websitename = $row["name"];
$websites->websiteurl = $row["url"];
$websites->country = $row["country"];
$data[]=$websites;;
}
$json = json_encode($data);//把數(shù)據(jù)轉(zhuǎn)換為JSON數(shù)據(jù).
echo "{".'"data"'.":".$json.",".'"code"'.":".'"1"'."}"; //輸出數(shù)據(jù)格式
}
else{
echo "查詢到0結(jié)果";
}
}
else{
echo "{".'"errorcode"'.":".'"0"'."}"; //如果傳入的參數(shù)不對(duì)，則返回{'errorcode':0}實(shí)際應(yīng)用也可以加msg：參數(shù)不對(duì)
}
?>
這樣后臺(tái)Php代碼就寫完了，前端先寫一個(gè)表格，比如我要取數(shù)據(jù)庫第二列數(shù)據(jù)。HTML代碼和js代碼如下，有點(diǎn)懶，就沒寫css了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.10.1.min.js"></script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>網(wǎng)站名</th>
<th>url</th>
<th>國家</th>
</tr>
<tr>
<td id="webName"></td>
<td id="url"></td>
<td id="country"></td>
</tr>
</table>
</body>
<script>
$(function(){
$.ajax({
url:"http://localhost/conMysql.php",
data:{"code":"1"},
dataType:"json",
type:"post",
success:function(res){
if(res.data){
$("#webName").text(res.data[1].websitename);
$("#url").text(res.data[1].websiteurl);
$("#country").text(res.data[1].country);
}
else if(res.errorcode == 0){
alert("傳入?yún)?shù)錯(cuò)誤");
}
},
error:function(){
console.log("網(wǎng)絡(luò)異常");
}
})
});
</script>
</html>
數(shù)據(jù)格式為json，傳入?yún)?shù)為code:1。運(yùn)行結(jié)果如下：
Php的地址跟這個(gè)不一樣，形成跨域(PS:這里之前的圖弄錯(cuò)了，沒有設(shè)置端口號(hào)，正確的形成跨域應(yīng)該改個(gè)80以外的端口號(hào))
用network可以查看到取得的數(shù)據(jù)：
接收到的完整數(shù)據(jù)：(ps:network的response太長，不好截圖)
