有段时间没有发表文章了,这篇文章是本人从自己微信公众号截出来的,用以弥补一下空白,哈哈。
image imagePHP开发环境有很多,这里用我的来讲,笔者用的是PhpStorm+Xampp,
先打开XAMPP,这是平台环境,需要使用它集成的apache和mysql。
打开XAMPP后启动apache和mysql
image运行mySql
image点击Shell运行工具,登陆命令:mysql -u root -p,root是开始时默认的用户名,默认用户密码为空。
image由于mysql后面被并购了,所以后面的版本是MariaDB,但是MariaDB保留了Mysql的功能,所以Mysql的操作还是行的通的。
imageshow databases,显示所有数据库,这里笔者已经创建好数据库test了。创建命令是CREATE DATABASE test;创建表是CREATE TABLE。
对于不了解数据库操作的也可以使用视图化操作,浏览器输入:http://localhost/phpmyadmin/会打开管理视图。
imageimagetest数据库websites表的结构如下图,因为xampp的mysql的表结构设置不了自增长id,所以笔者是用sql命令创建的。读者可以不设置id。
下面讲解php代码连接,一般ajax连接另一个地址会报错:跨域错误,这是一种保护行为,不让外部代码轻易访问公司数据库。我们自己访问就需要做一个跨域,跨域有很多种方法,这里说的仅是PHP后台设置可跨域:就是在头部加入
header("Access-Control-Allow-Origin:*");
*代表所有网站都可以访问,也可以设置固定地址。
笔者的PHP代码有详细注释,所以这里直接贴代码了。
<?php
header("Access-Control-Allow-Origin:*");//此处使网站可以进行跨域访问
header("Content-Type:application/json;charset=UTF-8");
//此处声明返回的是json类型及字符集为utf-8
$servername = "localhost"; //服务器
$username = "root"; //用户名
$password = ""; //密码
$dbname = "test"; //数据库
// 创建连接
$conn = new mysqli($servername, $username, $password,$dbname);
//设置编码,防止中文混乱
$conn->query("set names 'utf-8'");
// 检测连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 创建数据库查询语句
$sql = "select * from websites";
//接收查询结果
$result = $conn->query($sql);
$json ="";
$data =array(); //定义好一个数组.PHP中array相当于一个数据字典.
//定义一个类,用到存放从数据库中取出的数据
class websites
{
public $weibsitename ;
public $weibsiteurl ;
public $country ;
}
if (isset($_POST['code']) && $_POST["code"] == 1){ //如果code存在且等于1,创立条件,这只是个简单的例子,所以用code==1来判断
//判断是否存在数据
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);//把数据转换为JSON数据.
echo "{".'"data"'.":".$json.",".'"code"'.":".'"1"'."}"; //输出数据格式
}
else{
echo "查询到0结果";
}
}
else{
echo "{".'"errorcode"'.":".'"0"'."}"; //如果传入的参数不对,则返回{'errorcode':0}实际应用也可以加msg:参数不对
}
?>
这样后台Php代码就写完了,前端先写一个表格,比如我要取数据库第二列数据。HTML代码和js代码如下,有点懒,就没写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>网站名</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("传入参数错误");
}
},
error:function(){
console.log("网络异常");
}
})
});
</script>
</html>
image数据格式为json,传入参数为code:1。运行结果如下:
imagePhp的地址跟这个不一样,形成跨域(PS:这里之前的图弄错了,没有设置端口号,正确的形成跨域应该改个80以外的端口号)
image用network可以查看到取得的数据:
接收到的完整数据:(ps:network的response太长,不好截图)
image
网友评论