php后端请求基础知识笔记

这篇博客主要介绍了PHP后端的基础输出方法,包括html元素、字符串print_r及json_encode。同时,讲解了AJAX的基本用法,如初始AJAX、浏览器适配的GET和POST请求,以及readyState的状态解析。还涉及到了JSON对象与XML数据的处理,以及PHP中处理JSON数据的函数应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

php输出

<?php
//后台接口
echo 1;
?>

php输出 html元素

<?php
header('Content-Type:text/html; charset=utf-8');
echo '<div style="color:red;"><span>测试数据</span><span>测试数据</span><span>测试数据</span></div>';
?>

输出 字符串 print_r ($arr)

<?php
	$arr = array(123,456,789);
	print_r ($arr); //Array ( [0] => 123 [1] => 456 [2] => 789 )
?>

输出 字符串 print_r ($arr)

<?php
	//$arr = array("username"=>"李四","age"=>12,"chilese"=>"120");
	$arr = array('username'=>"李四",'age'=>12,'chilese'=>"120");
	print_r($arr); //Array ( [username] => 李四 [age] => 12 [chilese] => 120 )
?>

json_encode($arr) 将数组或者对象转换为字符串

	$arr = array();
	$arr['123'] = array("username"=>"zhangsan","chinese"=>"130");
	$arr['124'] = array("username"=>"lisi","chinese"=>"150");
	$arr['125'] = array("username"=>"wangwu","chinese"=>"120");
	$arr['126'] = array("username"=>"zhaoliu","chinese"=>"110");
	//print_r($arr);
	//Array ( [123] => Array ( [username] => zhangsan [chinese] => 130 ) [124] => Array ( [username] => lisi [chinese] => 150 ) [125] => Array ( [username] => wangwu [chinese] => 120 ) [126] => Array ( [username] => zhaoliu [chinese] => 110 ) )
	// \u5f20\u4e09这种形式就是Unicode编码
	// json_encode() 把数组或者对象转换成字符串
	$arr['127'] = array("username"=>"刘海","chinese"=>"110");
	echo json_encode($arr);//{"username":"\u5f20\u4e09","age":"12","sex":"male"}
?>

if语句

  • url:‘http://www.school.com/第二章/data/data.php?flag=1’,
$f = $_GET['flag'];
	if($f==1){
		echo 123;
	}else{
		echo '456';
	}
?>

初始ajax

  • 服务端
<?php
	$username = $_GET['username'];
	$pw = $_GET['password'];
	if($username=='admin' && $pw=='123'){
		echo 1;
	}else{
		echo 2;
	}
?>
  • 发送端
	<script>
	window.onload=function(){
		document.getElementById('btn').onclick=function(){
			var username = document.getElementById('username').value;
				var pw = document.getElementById('password').value;
				// 使用Ajax发送请求需要如下几步:
				// 1、创建XMLHttpRequest对象
				var xhr = new XMLHttpRequest();
				//2.主备发送
				xhr.open('get','./php/01check.php?username='+username+'&password='+pw,true);
				//3.执行发送动作
				xhr.send(null);
				//4.指定回调函数
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4){ //如果数据解析完成
						if(xhr.status==200){
							var data = xhr.responseText;
							var info = document.getElementById('info');
							if(data==1){
								info.innerText='登录成功';
							}else if(data == 2){
								info.innerText='登录失败';
							}
						}
					}
				}
			}
		}
	</script>

初始ajax 浏览器适配 get

  • 服务端
<?php
	$uname = $_GET['username'];
	$pw = $_GET['password'];
	if($uname =='admin' && $pw == '123'){
		echo 1;
	}else{
		echo $uname;
	}
?>
  • 发送端
		<script>
		window.onload=function(){
			document.getElementById('btn').onclick=function(){
				var uname = document.getElementById('username').value;
				var pw = document.getElementById('password').value;
					// 1、创建XMLHttpRequest对象
					var xhr = null;
					if(window.XMLHttpRequest){
						xhr = new XMLHttpRequest(); //标准
					}else{
						xhr = new ActiveXObject('Microsoft'); //IE6
					}
					//准备发送
					//参数一:请求方式(get获取数据;post提交数据)
					//参数二:请求地址
					//参数三:同步或者异步标志位,默认是true表示异步,false表示同步
					var parm = 'username='+uname+'&password='+pw;
					xhr.open('GET','php/03get.php?'+encodeURI(parm),true);
					//执行发送动作
					xhr.send(null);//get请求这里需要添加null参数
					xhr.onreadystatechange=function(){
						if(xhr.readyState==4){
							if(xhr.status==200){
								alert(xhr.responseText);
							}
						}
					}
				}
			}
			
		</script>

初始ajax 浏览器适配 post

<script>
		window.onload=function(){
			document.getElementById('btn').onclick=function(){
				var username = getElementIdForValue('username');
				var pas = getElementIdForValue('password');
				// 1、创建XMLHttpRequest对象
				var xhr = null;
				if(window.XMLHttpRequest){
				    xhr = new XMLHttpRequest();//标准
				}else{
				    xhr = new ActiveXObject("Microsoft");//IE6
				}
				//2.主备发送
				/*
				参数一:请求方式(get获取数据;post提交数据)
				参数二:请求地址
				参数三:同步或者异步标志位,默认是true表示异步,false表示同步
				
				post请求参数通过send传递,不需要通过encodeURI()转码
				必须设置请求头信息
				*/
			   var parm = 'username='+username+'&password='+pas;
			   xhr.open('POST','php/04post.php',false);
			   //3.执行发送动作
			   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			   xhr.send(parm);//post请求参数在这里传递,并且不需要转码
			   //4.指定回调函数
			   xhr.onreadystatechange=function(){
				   if(xhr.readyState==4){
					   if(xhr.status==200){
						   alert(xhr.responseText);
					   }
				   }
			   }
			}
		}
		function getElementIdForValue(id){
			return document.getElementById(id).value;
		}
		</script>

返回状态 readyState 详解

  • 异步执行 true 【默认】
  • 同步执行 false
    <script type="text/javascript">
    window.onload = function(){
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            var uname = document.getElementById('username').value;
            var pw = document.getElementById('password').value;

            // 1、创建XMLHttpRequest对象
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();//标准
            }else{
                xhr = new ActiveXObject("Microsoft");//IE6
            }
            // readyState=0表示xhr对象创建完成
            console.log(xhr.readyState + '----------1-----------');
            // 2、准备发送
            /*
            参数一:请求方式(get获取数据;post提交数据)
            参数二:请求地址
            参数三:同步或者异步标志位,默认是true表示异步,false表示同步
            
            post请求参数通过send传递,不需要通过encodeURI()转码
            必须设置请求头信息
            */
            var param = 'username='+uname+'&password='+pw;
            xhr.open('post','04post.php',true);
            // 3、执行发送动作
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(param);//post请求参数在这里传递,并且不需要转码
            // 4、指定回调函数
            // readyState=1表示已经发送了请求
            console.log(xhr.readyState + '----------2-----------');
            // 该函数调用的条件就是readyState状态发生变化(不包括从0变为1)
            xhr.onreadystatechange = function(){
                /*
                readyState:
                2 浏览器已经收到了服务器响应的数据
                3 正在解析数据
                4 数据已经解析完成,可以使用了
                */
                console.log(xhr.readyState + '----------3-----------');
                // 4表示服务器返回的数据已经可以使用了,但是这个数据不一定是正常的
                if(xhr.readyState == 4){
                    // http的常见状态码
                    /*
                    200表示响应成功
                    404没有找到请求的资源
                    500服务器端错误
                    */
                    // 200表示服务器返回的数据是正常的,不是200的话表示数据是错误的
                    if(xhr.status == 200){
                        // 这里的200表示数据是正常的
                        alert(xhr.responseText);
                        // xhr.responseXML
                    }
                }
            }
            
        }
    }
    </script>

XML 数据

  /*
  xml数据格式
  
  元数据:描述数据的数据
  
  这种数据格式的弊端:
  1、元数据占用的数据量比较大,不利于大量数据的网络传输
  2、解析不太方便
  */  

getElementsByClassName() 获取元素的类名

var container = document.getElementsByClassName('container');
container[0].innerHTML='<h1>你是个好人</h1>';
console.log(container.length); 

responseXML 服务端 xml格式数据类型

  • 服务端
<?php
	header('Content-Type:text/xml');//这里设置响应头信息,保证浏览器可以把相应内容识别为xml文件类型
	$arr = array();
	$arr[0] = array('name'=>'三国演绎','author'=>'罗贯中','desc'=>'一个好汉分针的年代故事');
	$arr[1] = array('name'=>'红楼梦','author'=>'曹雪芹','desc'=>'佛教的故事');
	$arr[2] = array('name'=>'水浒传','author'=>'吴承恩','desc'=>'一个神奇的故事');
	$arr[3] = array('name'=>'西游记','author'=>'是耐盐','desc'=>'代表广大人民形象的故事');
?>
<?xml version='1.0' encoding='utf-8'?>
<books>
	<book>
		<name><?php echo $arr[0]['name'] ?></name>
		<name><?php echo $arr[0]['author'] ?></name>
		<name><?php echo $arr[0]['desc'] ?></name>
	</book>
	<book>
		<name><?php echo $arr[1]['name'] ?></name>
		<name><?php echo $arr[1]['author'] ?></name>
		<name><?php echo $arr[1]['desc'] ?></name>
	</book>
	<book>
		<name><?php echo $arr[2]['name'] ?></name>
		<name><?php echo $arr[2]['author'] ?></name>
		<name><?php echo $arr[2]['desc'] ?></name>
	</book>
	<book>
		<name><?php echo $arr[3]['name'] ?></name>
		<name><?php echo $arr[3]['author'] ?></name>
		<name><?php echo $arr[3]['desc'] ?></name>
	</book>
</books>
?>
  • 使用实例
		<!--
		xml数据格式
		
		元数据:描述数据的数据
		
		这种数据格式的弊端:
		1、元数据占用的数据量比较大,不利于大量数据的网络传输
		2、解析不太方便
		-->
		<script>
		window.onload=function(){
			document.getElementById('btn').onclick=function(){
				var uname = getElementIdForValue('username');
				var pw = getElementIdForValue('password');
				// 1、创建XMLHttpRequest对象
				var xhr = null;
				if(window.XMLHttpRequest){
					xhr = new XMLHttpRequest();//标准
				}else{
					xhr = new ActiveXObject('Microsoft');//IE6
				}
				// readyState=0表示xhr对象创建完成
				//2.准备发送
				var param = 'username='+uname+'&password='+pw;
				xhr.open('POST','php/06.php',true); //默认异步请求
				//3.执行发送动作
				xhr.setRequestHeader('Copntent-Type','application/x-www-urlencode');
				xhr.send(param); //post请求参数在这里传递,并且不需要转码
				//4.指定回调函数
				// 该函数调用的条件就是readyState状态发生变化(不包括从0变为1)
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4){
						if(xhr.status==200){
							// console.log(xhr.responseXML);
							var data = xhr.responseXML;
							console.dir(data);
							// documentElement: books
							var databooks = data.getElementsByTagName('books');
							//console.log(books[0].childNodes); //文本节点 与元素节点
							var books = databooks[0].children;
							// console.log(books[0].nodeType);
							// console.log(books[1].nodeType);
							// console.log(books);
							// console.log(books[0].innerHTML);
							// console.log(books[1].innerHTML);
							
							// var book = books[0];
							// var name = book.children[0].firstChild.wholeText;
							// var author = book.children[1].firstChild.wholeText;
							// var desc = book.children[2].firstChild.wholeText;
							// console.log(name,author,desc);
							
							var container = document.getElementsByClassName('container');
							// alert(container);
							console.log(container.tagName);
							let tag = '';
							for(let i =0;i<books.length;i++){
								var book = books[i];
								var name = book.children[0].firstChild.wholeText;
								var author = book.children[1].firstChild.wholeText;
								var desc = book.children[2].firstChild.wholeText;
								tag+='<h1>'+name+','+author+','+desc+'</h1>'
							}
							container[0].innerHTML=tag;
							console.log(container.length);
						}
					}
				}
			}
		}
		function getElementIdForValue(id){
			return document.getElementById(id).value;
		}
		</script>

json对象

    /*
    json数据和普通的js对象的区别:
    1、json数据没有变量
    2、json形式的数据结尾没有分号
    3、json数据中的键必须用双引号包住
    */

对象 与 json 对比

	   var obj= {
		   name:"ZhanSan",
		   age:12,
		   lover:['football','backetball','pingbangball','rugby'],
		   firend:{
			   name:'LiWei',
			   height:180,
			   weight:'60kg'
		   }
	   };
	   var str = '{"name":"ZhangSan","age":12}';
	   var json = JSON.parse(str);//把json形式的字符串转成对象
	   // alert(json['name']);
	   var str1 = JSON.stringify(json);
	   alert(str1);//{"name":"ZhangSan","age":"12"}
		

php拼接数据

	<?php
		//echo '{"username":"zhansan","password":"12"}'
		
		$uname='wangwu';
		$pw = '123';
		echo '{"username":"'.$uname.'","password":"'.$pw.'"}';
		
	?>

php json_encode()

<?php
	//echo '{"username":"zhansan","password":"12"}'
	
	//$uname='wangwu';
	//$pw = '123';
	//echo '{"username":"'.$uname.'","password":"'.$pw.'"}';
	
	// json_encode() 作用:就是把数组转化成json形式的字符串
	//$arr = array(123,456,7890);
	//$str = json_encode($arr); //[123,456,7890] 数组
	
	//$arr = array("tom","jack","cat","spike");
	//$str = json_encode($arr);//["tom","jack","cat","spike"]
	
	//$arr = array("namne"=>"zhansan","name2"=>"lisi","name"=>"wuliu");
	$str = json_encode($arr); //{"namne":"zhansan","name2":"lisi","name":"wuliu"}
	
	echo $str;
	
?>

从服务端获取json数据

	<script>
		window.onload=function(){
			document.getElementById('btn').onclick=function(){
				// 1、创建XMLHttpRequest对象
				var xhr = null;
				if(window.XMLHttpRequest){
					xhr = new XMLHttpRequest();
				}else{
					xhr = new ActiveXObject('Microsoft');
				}
				// readyState=0表示xhr对象创建完成
				//2.正准备发送
				var parm = 'username=zhangSan$password=123';
				xhr.open('POST','php/07.php',true);
				//3.执行发送动作
				xhr.setRequestHeader('Content-Type','application-x-www-urlencoded');
				xhr.send(parm);//post请求参数在这里传递,并且不需要转码
				//4.指定回调函数
				xhr.onreadystatechange=function(){
				// 该函数调用的条件就是readyState状态发生变化(不包括从0变为1)
					if(xhr.readyState==4){
						if(xhr.status==200){
							var data = xhr.response;
							var datastr = xhr.responseText;
							var datatype = xhr.responseType;
							console.log(data); //{"name1":"zhansan","name2":"lisi","name3":"wuliu"}
							console.log(datastr);
							console.log(datatype);
							var json = JSON.parse(datastr); //转换为对象
							console.log(json.name1);
							console.log(json.name2);
							console.log(json.name3);
						}
					}
				}
			}
		}
		</script>

默认是异步线程

<script>
		window.onload=function(){
			// 默认是异步线程
			document.getElementById('btn').onclick=function(){
				// alert('sddd');
				var xhr = null;
				if(window.XMLHttpRequest){
					xhr = new XMLHttpRequest();
				}else{
					xhr = new ActiveXObject('Microsoft.XMLHTTP');
				}
				xhr.open('GET','php/08.php');
				xhr.send(null);
				console.log(1);
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4){
						if(xhr.status==200){
							var data = xhr.responseText;
							data = JSON.parse(data);
							var tag = '<div><span>'+data['name']+'</span>------<span>'+data['love']+'</span></div>';
							document.getElementById('info').innerHTML=tag;
							console.log(2);
						}
					}
				}
				console.log(3);
			}
		}
		</script>
  • 服务端
<?php
	$data = array("name"=>"zhansan","love"=>"footBall");
	echo json_encode($data);
?>
?>

线程事件

  /*
    单线程+事件队列

    事件队列中的任务执行的条件:
    1、主线程已经空闲
    2、任务满足触发条件
        1、定时函数(延时时间已经达到)
        2、事件函数(特定事件被触发)
        3、ajax的回调函数(服务器端有数据相应)
    */
        

?>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

红豌豆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值