AJAX异步传输——以php文件传输为例
此文档解决以下问题：
一、在当前html页面显示请求的数据
1.get方式请求 ,不传递参数
2.get方式请求 ,传递参数
3.post方式请求 ,不传递参数
4.post方式请求 ,传递参数
二、通过按钮跳转到php页面显示请求的数据
5.get方式请求 ,传递参数
1.get方式请求 ,不传递参数
1）index01.html页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//ajax异步传输基本步骤
function XMLhttpr () {
//1.创建XMLHttpRequest对象
//XMLHttpRequest 对象用于和服务器交换数据。
//为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
//如果支持，则创建 XMLHttpRequest 对象。
//如果不支持，则创建 ActiveXObject ：
var xhtp;
if(window.XMLHttpRequest){
//支持ie6 以上
xhtp=new XMLHttpRequest();
}else{
xhtp=new ActiveXObject("Microsoft.XMLHTTP");
} //2.规定请求
//open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
//method：请求的类型；GET 或 POST
//url：文件在服务器上的位置
//async：true（异步）或 false（同步）
//以get方式请求 php文件 不传递参数
xhtp.open("GET","test.php",true); //3.发送请求
//send(string) 将请求发送到服务器。
//string：仅用于 POST 请求
xhtp.send(); //4.响应请求
//onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
xhtp.onreadystatechange=function () {
//readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
//0: 请求未初始化
//1: 服务器连接已建立
//2: 请求已接收
//3: 请求处理中
//4: 请求已完成，且响应已就绪
//status 状态
//200: "OK"
//404: 未找到页面
if(xhtp.readyState== && xhtp.status==)
//当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
//responseText 获得字符串形式的响应数据。
//responseXML 获得 XML 形式的响应数据。
$("#myDiv").html(xhtp.responseText);//在当前页面显示php文件的数据
}
}
$(function () {
$("#btn").click(XMLhttpr);
})
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="提交" />
<br />
结果：<div id="myDiv"></div>
<br />
</body>
</html>
2）test.php页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<?php
//php 语法
//echo 输出
//php可以嵌套到html中
//php的连接符是. 不是+
//$_GET['name'] 获取get方式请求的参数 参数要用单引号
//isset() 判断该函数中的参数值是否存在
echo "get请求，不传递参数<br/>";
echo "来自php的数据";
echo "<br/>"; ?>
</p>
</body>
</html>
3）运行结果：
2.get方式请求 ,传递参数
1）index02.html页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//ajax异步传输基本步骤
function XMLhttpr () {
//1.创建XMLHttpRequest对象
//XMLHttpRequest 对象用于和服务器交换数据。
//为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
//如果支持，则创建 XMLHttpRequest 对象。
//如果不支持，则创建 ActiveXObject ：
var xhtp;
if(window.XMLHttpRequest){
//支持ie6 以上
xhtp=new XMLHttpRequest();
}else{
xhtp=new ActiveXObject("Microsoft.XMLHTTP");
} //2.规定请求
//open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
//method：请求的类型；GET 或 POST
//url：文件在服务器上的位置
//async：true（异步）或 false（同步）
//以get方式请求 php文件 传递参数
xhtp.open("GET","test02.php?name="+$("#txtname").val()+"&"+"age="+$("#txtage").val(),true); //3.发送请求
//send(string) 将请求发送到服务器。
//string：仅用于 POST 请求
xhtp.send(); //4.响应请求
//onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
xhtp.onreadystatechange=function () {
//readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
//0: 请求未初始化
//1: 服务器连接已建立
//2: 请求已接收
//3: 请求处理中
//4: 请求已完成，且响应已就绪
//status 状态
//200: "OK"
//404: 未找到页面
if(xhtp.readyState==4 && xhtp.status==200)
//当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
//responseText 获得字符串形式的响应数据。
//responseXML 获得 XML 形式的响应数据。
$("#myDiv").html(xhtp.responseText);//在当前页面显示php文件的数据
}
}
$(function () {
$("#btn").click(XMLhttpr);
})
</script>
</head>
<body>
姓名：<input type="text" name="txtname" id="txtname" value="" /><br/>
年龄：<input type="text" name="txtage" id="txtage" value="" /><br/>
<input type="button" name="btn" id="btn" value="提交" />
<br />
结果：<div id="myDiv"></div>
<br />
</body>
</html>
2）test02.php页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<?php //$_GET['name'] 获取get方式请求的参数 参数要用单引号
//isset() 判断该函数中的参数值是否存在
echo "get请求，传递参数<br/>";
echo "来自php的数据";
echo "<br/>"; if(isset($_GET['name'])){
echo "hello,".$_GET['age']."岁的".$_GET['name'];
}else{
echo "error";
}
?>
</p>
</body>
</html>
3）运行结果：
3.post方式请求 ,不传递参数
1）index03.html页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//ajax异步传输基本步骤
function XMLhttpr () {
var xhtp;
if(window.XMLHttpRequest){
//支持ie6 以上
xhtp=new XMLHttpRequest();
}else{
xhtp=new ActiveXObject("Microsoft.XMLHTTP");
} //2.规定请求
xhtp.open("POST","test03.php",true); //3.发送请求
xhtp.send(); //4.响应请求
xhtp.onreadystatechange=function () {
$("#myDiv").html(xhtp.responseText);//在当前页面显示php文件的数据
}
}
$(function () {
$("#btn").click(XMLhttpr);
})
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="提交" />
<br />
结果：<div id="myDiv"></div>
<br />
</body>
</html>
2）test03.php页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<?php echo "post请求请求，不传递参数<br/>";
echo "来自php的数据";
echo "<br/>"; ?>
</p>
</body>
</html>
3）运行结果：
4.post方式请求 ,传递参数
1）index04.html页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//ajax异步传输基本步骤
function XMLhttpr () {
//1.创建XMLHttpRequest对象
var xhtp;
if(window.XMLHttpRequest){
//支持ie6 以上
xhtp=new XMLHttpRequest();
}else{
xhtp=new ActiveXObject("Microsoft.XMLHTTP");
} //2.规定请求
xhtp.open("POST","test04.php",true);
xhtp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//xhtp.send("name=Henry&age=18");
xhtp.send("name="+$("#txtname").val()+"&"+"age="+$("#txtage").val()); //3.发送请求
//xhtp.send(); //4.响应请求
xhtp.onreadystatechange=function () {
if(xhtp.readyState==4 && xhtp.status==200)
$("#myDiv").html(xhtp.responseText);//在当前页面显示php文件的数据
}
}
$(function () {
$("#btn").click(XMLhttpr);
})
</script>
</head>
<body>
姓名：<input type="text" name="txtname" id="txtname" value="" /><br/>
年龄：<input type="text" name="txtage" id="txtage" value="" /><br/>
<input type="button" name="btn" id="btn" value="提交" />
<br />
结果：<div id="myDiv"></div>
<br />
</body>
</html>
2）test04.php页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<?php echo "post请求请求，传递参数<br/>";
echo "来自php的数据";
echo "<br/>";
if(isset($_POST['name'])){
echo "hello,".$_POST['age']."岁的".$_POST['name'];
}else{
echo "error";
}
?>
</p>
</body>
</html>
3）运行结果：
5.get方式请求 ,传递参数
1）index05.html页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> </head>
<body>
<form action="test05.php" method="get" id="myform"> 姓名：<input type="text" name="txtname" id="txtname" value="" /><br/>
年龄：<input type="text" name="txtage" id="txtage" value="" /><br/>
<input type="submit" name="btn" id="btn" value="提交" />
<br />
结果：<div id="myDiv"></div>
<br /> </form> </body>
</html>
2）test05.php页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<?php //echo 输出
//$_GET['name'] 获取get方式请求的参数 参数要用单引号
//isset() 判断该函数中的参数值是否存在
//如果通过submit按钮提交表单，则在php中通过$_GET或$_POST获取的参数名应该是input元素的name属性
echo "get请求，传递参数<br/>";
echo "来自php的数据";
echo "<br/>"; if(isset($_GET['txtname'])){
echo "hello,".$_GET['txtage']."岁的".$_GET['txtname'];
}else{
echo "error";
}
?>
</p>
</body>
</html>
3）运行结果：
正文结束！~~
AJAX异步传输——以php文件传输为例的更多相关文章
- AJAX传输——以XML文件传输为例
此文档解决以下问题: 一.responseText获取数据 1.AJAX异步传输,get请求方式/post请求方式,输出全部xml数据 二.responseXML获取数据 2.AJAX异步传输,get ...
- 六、Socket之UDP异步传输文件-实现稳定的文件传输
上一篇文章五.Socket之UDP异步传输文件-实现传输中取消传送中,还遗留了一个传输文件最大的问题,就是传输过程中丢包,这样在文件传输过程中就会卡住了,这篇文章就来解决文件传输中的丢包问题,实现稳定 ...
- 三、Socket之UDP异步传输文件-多文件传输和文件MD5校验
本文接着上一篇文章二.Socket之UDP异步传输文件,在上一篇文章的基础上实现多文件的传输和文件传输完成后进行完整性校验. 要实现多文件的传输,必须要对文(2)中发送文件的数据格式进行改进,必须加入 ...
- 远程文件传输命令•RHEL8/CentOS8文件上传下载-用例
scp协议 scp [options] [本地用户名@IP地址:]file1 [远程用户名 @IP 地址 :] file2 options: -v 用来显示进度,可以用来查看连接,认证,或是配置错误. ...
- FileUpload 上传文件，并实现c#使用Renci.SshNet.dll实现SFTP文件传输
fileupload上传文件和jquery的uplodify控件使用方法类似,对服务器控件不是很熟悉,记录一下. 主要是记录新接触的sftp文件上传.服务器环境下使用freesshd搭建好环境后,wi ...
- C#实现http协议下的多线程文件传输
用C#实现HTTP协议下的多线程文件传输转自 http://developer.51cto.com/art/201105/263066_all.htm C#(C Sharp)是微软(Microsof ...
- linux下常用文件传输命令 （转）
因为工作原因,需要经常在不同的服务器见进行文件传输,特别是大文件的传输,因此对linux下不同服务器间数据传输命令和工具进行了研究和总结.主要是rcp,scp,rsync,ftp,sftp,lftp, ...
- AJAX— 异步传输
AJAX异步传输 AJAX— 异步传输 AJAX浏览器与服务器异步传输数据,通过异步请求大大减少数据信息访问量,通俗:AJAX对局部刷新而不是对整个页面刷新,AJAX使得程序更快,更友好. AJAX处 ...
- ajax异步传输
2015.12.7 ajax异步传输 1.ajax :不是一个新的技术. js(XMLHTTPRequest) html css dom xml 这里只是一个新的js的内置对象.这算是js想要变得流行 ...
随机推荐
- vue系列之获取多选框中被选中的值
多个勾选框,绑定到同一个数组: <input type="checkbox" id="jack" value="Jack" v-mod ...
- java 数据的存储
1. 寄存器. 这是最快的存储区,因为它位于不同于其他存储区的地方 -- 处理器的内部.但是寄存器的数量极其有限,所以寄存器根据需求进行分配.你不能直接控制,也不能在程序中感觉到寄存器存在的任何迹象. ...
- vue2的缓存问题（非原创）
keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 运行结果描述: input输入框内,路由切换输入框内部的内容不会发生改变. 常见的用法:(下图 ...
- mysql的undo log和redo log
在数据库系统中,既有存放数据的文件,也有存放日志的文件.日志在内存中也是有缓存Log buffer,也有磁盘文件log file,本文主要描述存放日志的文件. MySQL中的日志文件,有这么两 ...
- Innodb引擎下mysql自身配置优化
1.简单介绍InnoDB给MySQL提供了具有提交,回滚和崩溃恢复能力的事务安全(ACID兼容)存储引擎.InnoDB锁定在行级并且也在SELECT语句提供一个Oracle风格一致的非锁定读.这些特色 ...
- wpf Assembly.LoadFile dll GetType 反射 抛异常 不具有由 URI 识别的资源。
public static void LoadViewFromUri(this Window window, string baseUri) { try { var resourceLocater = ...
- poj2528贴海报，，
对于区间段的离散化需要注意一下,和点离散化不同 离散后如何识别一段区间还是一段区间,而不是两个顶点,就是如果两个点的距离大于1,就往离散的数据里插入一个中间值,即用三个点来表示一段区间 /* 离散化长 ...
- poj3481 splaytree模板题
找不到错在哪里,先留着吧 /* splay是以键值排序的! 三个操作:1 a b,z增加键值为b的点,值为a 2,查询最大值 3,查询最小值 需要的操作:rotate,splay,insert,fin ...
- hdu4578线段树区间更新
/* 只有在区间中的数字不相同时才pushdown:往子区间传递数字再到子区间更新,同时该区间的flag置0 更新完左右子区间后进行pushup,如果左右子区间数字相同,那么把子区间合并,子区间数字置 ...
- python 全栈开发，Day130(多玩具端的遥控功能, 简单的双向聊天,聊天记录存放数据库,消息提醒,玩具主动发起消息,玩具主动发起点播)
先下载github代码,下面的操作,都是基于这个版本来的! https://github.com/987334176/Intelligent_toy/archive/v1.3.zip 注意:由于涉及到 ...