美文网首页我爱编程
PHP+Mysql+jquery跨域简单实例

PHP+Mysql+jquery跨域简单实例

作者: 沃土前端社区_子鸣 | 来源:发表于2018-03-29 10:34 被阅读0次

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

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

    image 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>
    

    数据格式为json,传入参数为code:1。运行结果如下:

    image

    Php的地址跟这个不一样,形成跨域(PS:这里之前的图弄错了,没有设置端口号,正确的形成跨域应该改个80以外的端口号)

    image

    用network可以查看到取得的数据:

    image

    接收到的完整数据:(ps:network的response太长,不好截图)

    image

    相关文章

      网友评论

        本文标题:PHP+Mysql+jquery跨域简单实例

        本文链接:https://www.haomeiwen.com/subject/saxmcftx.html