Post发送数据
<!--
get方式提交数据
1. 数据存放在URL中
2. 数据安全性不好
3. 数据存放量有限(有一些浏览器或者服务器会限制或者忽略过长的URL)
但get方式提交测试方便
-->
<!--
post方式提交
1. 提交的数据不再URL中,安全性更高
2. 浏览器端可以提交任意长度的数据,服务器端可以选择是否接受这些数据
3. 如果要上传文件,必须使用post
-->
<!-- post提交数据,需设置method=post -->
<form action="02sent.php" method="post">
<input type="text" placeholder="你喜欢什么颜色" name="color">
<input type="text" placeholder="你喜欢什么动漫" name="dmName">
<input type="submit">
</form>
在php中使用$_POST
获取提交的数据
上传文件
<!--
提交方式 - post
form表单
input type=file...
-->
<!-- 上传文件时,必须设置enctype属性为multipart/form-data
application/x-www-form-urlencoded - 默认|发送前对所有字符编码
multipart/form-data - 不对字符编码,在使用包含文件上传控件的表单时,必须使用改值
text/plain - 空格转换为‘+’号,不对特殊字符编码
-->
<form action="./02getFile.php" method="POST" enctype="multipart/form-data">
<input type="file" name="icon">
<input type="submit">
</form>
02getFile.php
<?php
//超全局变量,用来接收文件
print_r($_FILES);
/*
Array(
[icon] => Array(
[name] => xxx.xx
[type] => 文件类型
[tmp_name] => 文件路径(xxx.tmp 临时文件)
php代码执行结束后,临时文件就被销毁
[error] => 0(错误编码)
[size] => 文件大小
)
)
*/
//文件时临时缓存的,执行完整个php后就会销毁,所以需要将临时文件复制进行存储
// move_uploaded_file(file,newloc)
// 参数1 移动的文件
// 参数2 移动往何处
move_uploaded_file($_FILES['icon']['tmp_name'],'./files/'.$_FILES['icon']['name']);
?>
Ajax不刷新页面发送请求
//绑定事件
document.querySelector('input').onclick = function(){
//1. 创建对象
//创建 对象 异步对象
var xhr = new XMLHttpRequest();
//2. 设置请求行(get请求数据写在URL后面)
//请求行
//get 请求 数据拼接在URL中
//request.php?xxx=***
xhr.open('get','request.php?name=haha');
//注册回调函数
xhr.onload = function(){
console.log("请求已响应!");
console.log(xhr.responseText) //获取返回的文本(响应头中的文本-响应报文)
//修改页面的dom元素
document.querySelector('h3').innerHTML = xhr.responseText;
}
//3. 设置请求头(get可以省略,post不发送数据也可以省略)
//请求头
//参数1 键名,参数2 值
// xhr.setRequestHeader('qqt','good good study!'); //get请求可以没有这个
//4. 请求主体发送(get请求为空,或者写null,post请求数据写在这里,如果没有数据,直接为空或者null)
//请求主体
xhr.send(null);
}
request.php
<?php
echo $_GET['name'];
?>
Ajax发送POST请求
//点击事件
document.getElementsByTagName('input')[0].onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open('post','02_06ajaxPost.php');
//如果使用post发送数据,必须设置此项
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.onload = function(){
console.log(xhr.responseText);
}
//post请求发送数据写在send()中
//key=value&key2=value2
xhr.send('name=kkk&age=19');
}