详解Ajax:如何实现从前端不刷新页面就可以到后端取到数据

2023-05-27 0 666

提及axaj许多人总说极难,甚么反弹表达式呀之类瞧瞧人烦躁,只不过懂ajax在js里头是怎样同时实现向伺服器允诺统计数据的基本原理,所以认知ajax也就并非极难了,那时他们一起来看一看。

ajax促进作用:ajax控制技术的目ipt地继续执行,进而同时实现促发器。

在js里头ajax主要就化解的难题是:不创下现阶段网页,把这类统计数据传达给伺服器,把这类统计数据从伺服器取回应用流程。

上面是具体内容标识符了。他们写两个流程让其其间端分立,后端操作形式能让后端获得积极响应,并从后端赢得适当的统计数据

**一·在html里的三步走思路: **

1.创建AJAX核心理念第一类

var xhr=new XMLHttpRequest();

2.加进预读取;指假如xhr第一类的预备好的状况出现了变动时,促发表达式。

xhr.addEventListener(“load”,loadHandler);

3.创建相连

xhr.open(“GET”,”http://10.9.164.85:80/index.php?user=zhangsan”);

//

创建相连里模块难题:

句法: xhr.open(“get”, url, true);

附注:open() 形式中 第1个模块指允诺的推送形式,值get或post。 第2个模块指允诺的url方向是你写的php文档 的方向,?前面是所随身携带get所要赢得的有关重要信息。 第3个模块指允诺是促发器却是并行,假如写true则表示促发器(预设true), 写false则表示并行。

4.向伺服器发动允诺

xhr.send();

句法: xhr.send();

附注: 假如是get形式推送允诺,send()命令中不用写任何模块 传达的统计数据能写在url中,伺服器用$_GET[“模块名”]接收。

假如是post形式推送允诺,需要设置允诺头才能正确把统计数据传达给后端网页。 他们这里采用的是get形式,所以不用写任何模块。

xhr.setRequestHeader(Content-Type,

application/x-www-form-urlencoded); xhr.send(“统计数据名1=统计数据值&统计数据名2=统计数据值”),伺服器用$_POST[“模块名”]接收。

5.声明预读取表达式;接收积极响应

function loadHandler(){

console.log(xhr.response);

}

二· 在php文档里头

三步骤:

header(“content-type:text/html;charset=utf-8”);

设置字符编码

header(“Access-Control-Allow-Origin:*”);

设置

Access-Control-Allow-Origin来同时实现跨域访问(因为不同的域名预设不允许之间不能相互通信)

echo $_GET[“user”].”今天心情很好”;

所要交给前台的统计数据

四.同时实现访问:

将写好的php文档放入到phpStydy 的 www的文档夹内,如下图:

1.找到phpStyle的安装目录

详解Ajax:如何实现从前端不刷新页面就可以到后端取到数据

2.打开找到www文档夹

详解Ajax:如何实现从前端不刷新页面就可以到后端取到数据

3.将你写好的PHP文档复制到www文档夹里头去,如我刚写的index.php文档;

详解Ajax:如何实现从前端不刷新页面就可以到后端取到数据

4.那时同时实现简单的ajax的访问;

那时运行你的html标识符:

详解Ajax:如何实现从前端不刷新页面就可以到后端取到数据

此时就会同时实现网页不创下,就能访问php的统计数据了

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务