[PHP]什么？学前端的你竟然不会写个简单的接口，快来瞅一瞅

最新推荐文章于 2022-07-30 18:01:42 发布

AI Thabo

最新推荐文章于 2022-07-30 18:01:42 发布

阅读量307

点赞数 2

分类专栏： PHP jQuery 文章标签： php jquery javascript 前端

本文链接：https://blog.csdn.net/m0_46470372/article/details/109552681

版权

PHP 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jQuery

5 篇文章 1 订阅

订阅专栏

[PHP]使用PHP来完成第一个前后端分离接口

作为一个合格的前端，不会点后端怎么行？(-_-其实是前端不好独立做项目，简易的后端还是要一学的)

1. 实现第一个简易接口

首先在能够运行php的环境目录下，创建第一个php文件，我们将此命名为 api.php，其代码如下

<?php
echo "这是第一个API!";	// echo 之后的内容将会被返回

建立html文件，我这里命名为index.html，并正确引入jquery，写好ajax访问代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php测试</title>
    <script src="js/jquery-3.3.1.min.js"></script>	<!--这里是引入jquery，不一定相同-->
    <style>
        h1{
            font-weight:200;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>实现你的第一个php接口</h1>
        <button id="btn">点击获取信息</button>
        <p>没有获取到信息哦。。。</p>
    </div>
    <script>
        $("#btn").click(function () {
            $.get("./api.php",function (data) {
                $("p").text(data);	// 这里是将回调的数据设置给p标签
            })
        })
    </script>
</body>
</html>

保存好，运行index.html，默认是这个样子的.

在这里插入图片描述

触发按钮后，接到数据，终

在这里插入图片描述

关于PHP的提示

在这里插入图片描述

由于我的所有文件都是在集成环境xampp的htdocs目录下，所以不存在跨域问题
如果不放在同样目录下，可能会遇到跨域问题，需要在php中添加如下语句

header('Content-Type: text/html;charset=utf-8');
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:*');
// 响应类型
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');

2. 简易接口还不够，我要同文件多个接口

创建 api1.php 文件，代码如下

<?php

$type = $_GET["type"];	// 获取链接中 ?type= 之后的数据

if($type == "hello"){	//第一个链接
    echo "Hello World!";
}

if($type == "hi"){		//第二个链接
    echo "hi csdn!";
}

通过 api1.php?type=hello 的链接，会触发第一个，api1.php?type=hi会触发第二个

接下来我们将 index.html 的部分代码进行修改

$("#btn").click(function () {
            $.get("./api1.php?type=hello",function (data) {	// ?之后的内容是我们要传的参数
                $("p").text(data);
            })
})

按钮运行效果如下

$("#btn").click(function () {
            $.get("./api1.php?type=hi",function (data) {
                $("p").text(data);
            })
})

按钮运行效果如下

3. 多个接口算什么？我要传参！

传参的方式与2大致相同，这里仅仅演示了GET提交请求。
这次我们尝试使用表单输入框，将输入的文本去PHP后台走一遭

创建 api2.php

<?php

$text = $_GET["text"];

if(isset($text)){
    echo "你传入的文本是$text";
}

修改 index.html 增加input文本框

<body>
    <div id="app">
        <h1>实现你的第一个php接口</h1>
        <input type="text" id="text1">
        <button id="btn">点击获取信息</button>
        <p>没有获取到信息哦。。。</p>
    </div>
    <script>
        $("#btn").click(function () {
            let text = $("#text1").val();
			// 下面将文本框的内容以GET提交的方式挂在URL之后
            $.get("./api1.php?text="+text ,function (data) {
                $("p").text(data);
            })
        })
    </script>
</body>

接下来，让我们尝试一下运行效果

按下按钮后，数据在后台走了一圈后，被传了回来

在这里插入图片描述

今天的博客就到这里啦点赞收藏支持博主吧

AI Thabo

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
[PHP]什么？学前端的你竟然不会写个简单的接口，快来瞅一瞅

[PHP]使用PHP来完成第一个前后端分离接口作为一个合格的前端，不会点后端怎么行？(-_-其实是前端不好独立做项目，简易的后端还是要一学的)目录实现第一个简易接口简易接口还不够，我要同文件多个接口多个接口算什么？我要传参！1. 实现第一个简易接口首先在能够运行php的环境目录下，创建第一个php文件，我们将此命名为 api.php，其代码如下<?phpecho "这是第一个API!"; // echo 之后的内容将会被返回建立html文件，我这里命名为index.
复制链接

扫一扫