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