Ajax|day02-Ajax发送get和post请求、上传文件

48 阅读 0 评论 32 点赞

我是靠谱客的博主整齐草丛，最近开发中收集的这篇文章主要介绍Ajax|day02-Ajax发送get和post请求、上传文件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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');
}