526互联

php实战手册（3）

发布时间 2023-08-10 13:07:51作者: 水宝石

目录

ajax

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。

  • 同步
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>整数</title>
  </head>
  <body>	
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js learn</title>
  </head>
  <body>	
      <p>javascript learning...</p>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"/>
      <p id="loginTip"></p>
      <button id="login" onclick="loginFun()">login</button>
	  <script  type="text/javascript">
		  function loginFun(){		  
			var  xhr = new XMLHttpRequest();
			var  userName=document.getElementById("name").value;
			xhr.open("GET",`index.php?name=${userName}`,false);
			xhr.send(null);
			document.getElementById("loginTip").innerHTML=xhr.responseText;			
		  }
	  </script>
  </body>
</html>



  </body>
</html>


<?php 
$name=$_GET["name"];
if (!is_null($name)){
   if (trim($name)=="" )
		echo "<br/>请输入用户名<br/>";
   else
		echo "<br/>hello,$name<br/>";
}
?>

image

  • 异步
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>整数</title>
  </head>
  <body>	
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js learn</title>
  </head>
  <body>	
      <p>javascript learning...</p>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"/>
      <p id="loginTip"></p>
      <button id="login" onclick="loginFun()">login</button>
	  <script  type="text/javascript">
		  function loginFun(){		  
			var  xhr = new XMLHttpRequest();
			var  userName=document.getElementById("name").value;
			xhr.open("GET",`index.php?name=${userName}`,true);
			xhr.onreadystatechange = function () {
				if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
					document.getElementById("loginTip").innerHTML=xhr.responseText;
				}		
			};
			xhr.send(null);
		  }

	  </script>
  </body>
</html>



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>整数</title>
  </head>
  <body>	
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js learn</title>
  </head>
  <body>	
      <p>javascript learning...</p>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"/>
      <p id="loginTip"></p>
      <button id="login" onclick="loginFun()">login</button>
	  <script  type="text/javascript">
		  function loginFun(){		  
			var  xhr = new XMLHttpRequest();
			var  userName=document.getElementById("name").value;
			xhr.open("GET",`index.php?name=${userName}`,true);
			xhr.onreadystatechange = function () {
                   showTip(xhr);
			};
			xhr.send(null);
		  }
		  function showTip(xhr){
			    if (xhr.readyState === 4 && xhr.status === 200) {
					document.getElementById("loginTip").innerHTML=xhr.responseText;		
				}					  
		  }
	  </script>
  </body>
</html>



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>整数</title>
  </head>
  <body>	
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js learn</title>
  </head>
  <body>	
      <p>javascript learning...</p>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"/>
      <p id="loginTip"></p>
      <button id="login" onclick="loginFun()">login</button>
	  <script  type="text/javascript">
		  function loginFun(){		  
			let  xhr = new XMLHttpRequest();
			let  userName=document.getElementById("name").value;
			xhr.open("GET",`index.php?name=${userName}`,true);
			xhr.onreadystatechange = ()=>{
                   showTip(xhr);
			};
			xhr.send(null);
		  }
		  function showTip(xhr){
			    if (xhr.readyState === 4 && xhr.status === 200) {
					document.getElementById("loginTip").innerHTML=xhr.responseText;		
				}					  
		  }
	  </script>
  </body>
</html>



<?php 
$name=$_GET["name"];
if (!is_null($name)){
   if (trim($name)=="" )
		echo "<br/>请输入用户名<br/>";
   else
		echo "<br/>hello,$name<br/>";
}
?>
  • post
    image
<?php 
$name=$_POST["name"];
$age=$_POST["age"];
if (is_null($name)||is_null($age))
   return ;
if ($age<18)
{
	echo "<br/>$name,未成年人禁止登录<br/>";
}
else {
   if (trim($name)=="" )
		echo "<br/>请输入用户名<br/>";
   else
		echo "<br/>hello,$name<br/>";
}
?>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>整数</title>
  </head>
  <body>	
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js learn</title>
  </head>
  <body>	
      <p>javascript learning...</p>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"/>
      <label for="age">Age:</label>
      <input type="text" id="age" name="age"/>
      <p id="loginTip"></p>
      <button id="login" onclick="loginFun()">login</button>
	  <script  type="text/javascript">
		  function loginFun(){		  
			let  xhr = new XMLHttpRequest();
			let  userName=document.getElementById("name").value;
			let  userAge=document.getElementById("age").value;
			xhr.open("POST","index.php",true);
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xhr.onreadystatechange = ()=>{
                   showTip(xhr);
			};
			xhr.send(`name=${userName}&age=${userAge}`);
		  }
		  function showTip(xhr){
			    if (xhr.readyState === 4 && xhr.status === 200) {
					document.getElementById("loginTip").innerHTML=xhr.responseText;		
				}					  
		  }
	  </script>
  </body>
</html>