php与后台的交互、ajax异步处理

最新推荐文章于 2021-03-29 14:21:29 发布

原创

最新推荐文章于 2021-03-29 14:21:29 发布

· 1.2k 阅读

2 ·

版权

文章标签：

#ajax #web #php

本文详细介绍了PHP与后台的交互，包括数据类型的处理、传输过程和变量作用域，同时深入讲解了Ajax异步处理的五个实例，涵盖请求纯文本、JSON数据、Github接口、PHP接口和PHP数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

准备
注意
- 可能出现的问题
- 用服务器打开网页的方式
ip与域名关系
php与后台的交互
Ajax异步处理

准备

软件：XAMPP与HBuilder
XAMPP：点击下载
HBuilder：点击下载

计算机必须已经安装了mysql

XAMPP默认安装路径

操作目录：C:\xampp\htdocs

注意

可能出现的问题

XAMPP的Apache服务器端口显示不可用
解决：点击浏览

用服务器打开网页的方式

在这里插入图片描述
浏览器输入localhost:端口号，会出现这个页面

例如要打开这个文件，可以输入：
C:\xampp\htdocs\php\hello_world.php

浏览器输入：
http://localhost/php/hello_world.php

会出现这个页面
在这里插入图片描述

ip与域名关系

xxx.xxx.xxx.xxx
www.baidu.com ==>DNS xxx.xxx.xxx.xxx

QQ
Wechat
MOMO

今晚去哪？192.168.0.2 ==> http service
//IP：表示网络上的一个终端
//port：标识的是终端上的一个应用

php与后台的交互

目录：C:\xampp\htdocs\php
在这里插入图片描述

说明

在这里插入图片描述

hello-world.php

在这里插入图片描述

数据类型

type.php

在这里插入图片描述

传输过程

文件目录

在这里插入图片描述

person.php

在这里插入图片描述

person.html

在这里插入图片描述

变量及作用域

variable.php

在这里插入图片描述

Ajax异步处理

目录：C:\xampp\htdocs\ajax

Ajax 1 - 请求纯文本

文件目录

在这里插入图片描述

sample.txt

在这里插入图片描述

ajax1.html

<body>
<button id="button">请求纯文本</button>
<br />
<div id="text"></div>

<script type="text/javascript">
    document.getElementById('button').addEventListener('click', loadText);

    function loadText() {
   
        // console.log('hello world');
        // 1 创建一个XMLHTTPRequest对象
        var xhr = new XMLHttpRequest();
        // console.log(xhr);

        // 2 xhr.open(type,url/file,async);
        xhr.open('GET', 'sample.txt', true);

		console.log('READYSTATE:', xhr.readyState);

		// 4 两种请求方式 onload / onreadystatechange

		// 请求处理中
		xhr.onprogress=function(){
   
			console.log('测试READYSTATE:', xhr.readyState);
		}

		// 4.1
        xhr.onload=function(){
   
			console.log('READYSTATE:', xhr.readyState);
			console.log(this.responseText);
			document.getElementById('text').innerText=this.responseText;
        }

        // 4.2
        // console.log('READYSTATE:', xhr.readyState);
        // xhr.onreadystatechange = function () {
   
        //     console.log('READYSTATE:', xhr.readyState);
        //     if (this.status == 200 && this.readyState==4) {
   
        //         console.log(this.responseText);
		// 		   document.getElementById('text').innerText=this.responseText;
        //     }else if (this.status==404){
   
        //     	console.log('网页不存在');
		// 	}
        // }

        // 3 发送请求
        xhr.send();
    }

    // readyState 状态码

最低0.47元/天解锁文章