美文网首页我爱编程
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跨域简单实例

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

  • axios发送俩次请求的原因

    其实跨域分为简单跨域请求和复杂跨域请求 简单跨域请求是不会发送options请求的 复杂跨域请求会发送一个预检请求...

  • VUE-PC端项目遇到的坑总结

    1.跨域 其中说到跨域的话首要的就是axios的配置 // 创建axios实例axios.defaults.tim...

  • 前端请求

    node 简单跨域 前端简单请求

  • 在vue项目中使用element的Upload搭建上传功能,报跨

    根据官方提供实例 开发前已使用cors解决项目跨域问题,!CORS请求分成两类:简单请求(simple reque...

  • Vue cli 3.x 版本跨域问题

    前言 首先简单的说一下什么是跨域 跨域首先是出现在浏览器里的,也就是浏览器拦截了跨域请求。 跨域所跨的域(doma...

  • Http浅析【2】——ajax跨域问题

    视频参考:ajax跨域完全讲解 本文精华版:【综合】ajax跨域问题 什么是跨域问题 简单来讲,当前台调用后台,如...

  • 跨域配置

    SpringBoot跨域配置 我们的后端使用Spring Boot。Spring Boot跨域非常简单,只需书写以...

  • Vue 项目解决跨域问题

    vue 项目中解决接口跨域的方法 1.简单粗暴直接用jquery 的jsonp 来调用跨域跨域接口 2.如果本地引...

  • 跨域方法集锦

    什么叫跨域跨域解决方法:1.cors(简单请求、非简单请求)2.jsonp3.new Image()4.nginx...

网友评论

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

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