PHP+Mysql+jquery跨域简单实例

2018-03-29 本文已影响0人沃土前端社区_子鸣

有段时间没有发表文章了，这篇文章是本人从自己微信公众号截出来的，用以弥补一下空白，哈哈。

PHP开发环境有很多，这里用我的来讲，笔者用的是PhpStorm+Xampp,

image

先打开XAMPP，这是平台环境，需要使用它集成的apache和mysql。

打开XAMPP后启动apache和mysql

image

运行mySql

image

点击Shell运行工具，登陆命令:mysql -u root -p，root是开始时默认的用户名，默认用户密码为空。

image

由于mysql后面被并购了，所以后面的版本是MariaDB,但是MariaDB保留了Mysql的功能，所以Mysql的操作还是行的通的。

image

show databases，显示所有数据库，这里笔者已经创建好数据库test了。创建命令是CREATE DATABASE test;创建表是CREATE TABLE。

对于不了解数据库操作的也可以使用视图化操作，浏览器输入：http://localhost/phpmyadmin/会打开管理视图。

image

test数据库websites表的结构如下图，因为xampp的mysql的表结构设置不了自增长id，所以笔者是用sql命令创建的。读者可以不设置id。

image

下面讲解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>