当前位置:首页 > 教育培训 >

html代码中怎么获取后端传递参数

来源:原点资讯(www.yd166.com)时间:2023-07-09 02:10:51作者:YD166手机阅读>>

提到axaj很多人总说很难,什么回调函数呀等等就让人心烦,其实懂得ajax在js里面是如何实现向服务器请求数据的原理,那么理解ajax也就不是很难了,现在我们一起来看看。

ajax作用:ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。实现前后端分离。ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript地执行,从而实现异步。

在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的安装目录

html代码中怎么获取后端传递参数,(1)

2.打开找到www文件夹

html代码中怎么获取后端传递参数,(2)

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

html代码中怎么获取后端传递参数,(3)

4.现在实现简单的ajax的访问;

现在运行你的html代码:

html代码中怎么获取后端传递参数,(4)

此时就会实现页面不刷新,就可以访问php的数据了

栏目热文

html获取实时数据(html如何获取另一个html数据)

html获取实时数据(html如何获取另一个html数据)

在本Pandas教程中,我们将详细介绍如何使用Pandas read_HTML方法从HTML中获取数据。首先,在最简单的...

2023-07-09 01:57:34查看全文 >>

怎么获取本地html页面的数据(html获取后台实时数据)

怎么获取本地html页面的数据(html获取后台实时数据)

不要使用sed、awk、grep等工具进行尝试(这会导致不可预期的结果)。在许多情况下,你最好选择使用支持XML数据的编...

2023-07-09 01:24:09查看全文 >>

html获取后台数据库(html调用数据库数据最简单方法)

html获取后台数据库(html调用数据库数据最简单方法)

大家常见的网站数据转移(数据迁移)通常是一种同样的cms之间。但是,如果网站换了CMS,后台数据库类型和数据表结构都不一...

2023-07-09 01:59:53查看全文 >>

html前端怎么传值给后端(后端返回一个html显示给前端)

html前端怎么传值给后端(后端返回一个html显示给前端)

写在开篇什么是表单呢?当前端想要提交数据给后端,怎么搞?那么在前端开发中,表单是常用的手段,比如常见的场景有:登录框、账...

2023-07-09 01:45:31查看全文 >>

html调用后端接口(html里面怎么导入web接口)

html调用后端接口(html里面怎么导入web接口)

专注于Java领域优质技术,欢迎关注作 者:Cherry300来 源:jianshu.com/p/c86cee16b41...

2023-07-09 01:45:13查看全文 >>

html发送数据给后端(html数据传到后端)

html发送数据给后端(html数据传到后端)

在电商网站搭建过程中,前端经常会向后端请求数据,有时候通过HTML、JS和PHP文件的处理来实现数据的连通。通常情况下,...

2023-07-09 02:07:00查看全文 >>

后端输出html代码前端怎么获取(前端如何获取线上代码)

后端输出html代码前端怎么获取(前端如何获取线上代码)

有时候我们会遇到这样的一个需求:通过前端传入的数据渲染一个现成的打印模板出来,最后返回一个html格式的文本给前端,模板...

2023-07-09 01:46:44查看全文 >>

html页面怎么获取后端数据(html初始数据怎么从后台获取)

html页面怎么获取后端数据(html初始数据怎么从后台获取)

本文内容已假定您已拥有一些 html 以及爬虫的基础知识需求背景这几天在做一款资源站产品,开发过程中需要一定的测试数据,...

2023-07-09 01:42:41查看全文 >>

怎么在html显示从后台获取的数据(html查询后台数据)

怎么在html显示从后台获取的数据(html查询后台数据)

html简单教程简单登录界面以下是一个简单的html登录页面的代码,你可以根据自己的需要进行修改:<!DOCTYP...

2023-07-09 01:48:03查看全文 >>

html怎么抓取页面数据(html怎么提取数据)

html怎么抓取页面数据(html怎么提取数据)

在日常的前端开发中,我们经常需要从网页中获取特定的数据,这就需要用到JavaScript来抓取网页内容。今天我就来分享一...

2023-07-09 01:46:05查看全文 >>

文档排行