AJAX(第一话 Ajax的get提交和post提交)

最新推荐文章于 2023-06-25 21:57:14 发布

无~痕

最新推荐文章于 2023-06-25 21:57:14 发布

阅读量1.1k

点赞数

分类专栏： H5 前端文章标签： Ajax

本文链接：https://blog.csdn.net/qq_27820551/article/details/84727018

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

前置知识点

获取表单提交的数据

<form action="post.php" method="post">
    <input type="text" name="username" placeholder="请输入用户名"/><br>
    <input type="password" name="password" placeholder="请输入密码"/><br>
    <input type="submit" value="提交"/>
</form>

<?php
 /**
 * Created by 叶孤城 on 2018/12/3.
 */
    //http://127.0.0.1/get.php?username=%E6%97%A0%E7%97%95&password=123
    echo '<h1>'.$_POST['username'].'欢迎你</h1>';//无痕欢迎你
?>

模拟用户查询

<form action="person.php" method="post">
			<input type="text" name="username">
			<br>
			<input type="submit" value="提交">
		</form>

<?php

	$personArr = array(
		'无痕' =>array('name'=>'无痕','age'=>'18','hobby'=>'reading'),
		'zhangsan'=>array('name'=>'zhangsan','age'=>'20','hobby'=>'writing')			
		 );
	//通过post获取提交的数据
	$key=$_POST['username'];
	//从数组中获取对应的用户数据
	//print_r($personArr[$key]);
	//拼成有用的信息
	$aPerson=$personArr[$key];
	echo '你好'.$aPerson['name'],'<br>';
	echo '你今年才'.$aPerson['age'].'岁','<br>';
	echo '你喜欢'.$aPerson['hobby'];
  ?>

实现文件上传功能

如果要使用文件上传功能：form表单还需要设置enctype='mutipart/form'

<h1>上传文件</h1>
	<!-- 上传文件必须要设置enctype属性enctype="multipart/form-data" -->
	<form action="upfile.php" method="post" enctype="multipart/form-data">
		<input type="file" name="upfile">
		<input type="submit" value="提交">
	</form>

<?php
	print_r($_FILES);
	echo "<br>";
	$fileArr=$_FILES['upfile'];
	$fileName=$fileArr['name'];
	$filetype=$fileArr['type'];
	$filetmpname=$fileArr['tmp_name'];
	echo 'fileName:'.$fileName,'<br>';  //fileName:QQ文件目录.txt
	echo 'filetmpname:'.$filetmpname;//filetmpname:C:\Windows\Temp\phpC7B9.tmp
  ?>

将文件保存到指定目录中

    //如何在PHP中将文件保存
	move_uploaded_file($filetmpname, 'files/'.$fileName);

修改php上传文件大小限制：

php.ini中

upload_max_filesize= xxxM ;上传文件的最大限制

post_max_size=xxxM：通过Post提交的最大的数据大小

由于上传的文件太大，所以需要占用不少的上传时间，所以需要配置如下参数

max_excution_tim=xxxxx 设置最长的执行时间，单位为秒

max_input_time =xxx 接收提交数据的时间限制单位为秒

memory_limit= xxx M 最大的内存消耗

Ajax基本概念：

普通的HTTP请求：如果需要发出http请求：页面会刷新，如果网速很慢，刷新页面势极少量的信息提交必会重新加载，造成不不要的资源浪费，一些量的提交给服务器，没必要这个页面刷新。

Ajax:在不刷新页面的情况下，给服务器发送HTTP请求

案例：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h1>发送get类型的ajax请求</h1>
	<button id="ajaxBtn">发送ajax请求</button>
	<script type="text/javascript">

		document.querySelector("#ajaxBtn").onclick=function(){
			//创建异步对象
			var ajaxObj=new XMLHttpRequest();
			//设置请求的url参数
			//参数1：请求方法 参数2：请求的URL
			//get提交的数据，是直接追加到url后面格式为：xxx.php?username=wuhen
			//xxx.php?username='+document.querySelector("input").value
			ajaxObj.open("get","ajax.php?username=wuhen");
			//发送请求
			ajaxObj.send();
			//注册事件 onreadystatechange 状态改变就会调用
			//如果要在数据完美请求回来的时候才调用，我们需要手动的写一些判断的逻辑
			ajaxObj.onreadystatechange=function(){
				//为了保证数据完整回来，需要判断该两个值
				if (ajaxObj.readyState==4&&ajaxObj.status==200) {
					//如果能够进来，说明数据请求回来了，而且请求页面是存在的
					console.log('数据完美回来了');
					//数据保存在异步对象中
					console.log(ajaxObj.responseText);//ajax_php_msg
					document.querySelector('h1').innerHTML=ajaxObj.responseText;
				} 
			}
		}
	</script>
</body>
</html>

<?php
	echo $_GET['username'];
  ?>

Ajax发送Post请求

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>post提交ajax请求</h1>
	<input type="text" name="username" id="username">
	<button id="ajaxBtn">提交</button>
	<script>
		document.querySelector('#ajaxBtn').onclick=function(){
			var ajaxObj = new XMLHttpRequest();
			//使用post提交
			ajaxObj.open('post','ajax.php');
			//如果使用post提交数据必须设置如下内容
			//修改了发送给服务器请求报文的内容
			//如果需要想HTML表单那样Post数据，请使用setRequestHeader()来添加
			//HTTP头，然后在send()方法中规定您希望发送的数据
			ajaxObj.setRequestHeader('Content-type','application/x-www-form-urlencoded');
			//post请求发送的数据写在send方法中，格式：name=wuhen&age=24
			ajaxObj.send('username='+document.querySelector('#username').value);
			ajaxObj.onreadystatechange=function(){
				if (ajaxObj.readyState==4&&ajaxObj.status==200) {
					console.log(ajaxObj.responseText);
				}
			}
		}
	</script>
</body>
</html>

无~痕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX(第一话 Ajax的get提交和post提交)

前置知识点获取表单提交的数据&lt;form action="post.php" method="post"&gt; &lt;input type="text" name="username" placeholder="请输入用户名"/&gt;&lt;br&gt; &lt;input type="password&qu
复制链接

扫一扫

专栏目录