这几天学到php的GD图像处理库,做了一个验证码的小demo
前端用户提交输入框的字符串,在后台将字符串与存在SESSION中的验证码字符串进行比较,判断用户输入是否正确
第一版做的是通过form表单提交到后台php文件进行处理,这样提交以后浏览器就会跳转到响应页面
第二版通过js进行提交,并去掉form的默认提交行为,通过AJAX获取验证码的判断状态
但是即使设置了请求头为Content-Type : application/json,后台代码中$_POST却接收不到post方式发送过去的数据,是空值
查阅资料发现$_POST只可以取到form提交的数据,而form提交的请求头为Content-Type : application/x-www-form-urlencoded,导致$_POST不能解析出json类型的请求数据,用json传输请求数据后台需要使用file_get_contents读取请求数据(这个还没有试过~~)
在ajax中设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
设置好后后台就可以通过$_POST接收到参数了
附上完整代码:
前端部分
<body> <form id="captcha_form" method="POST"> <input type="text" name="code"/> <button>提交</button> </form> <img src="./code.php" alt="captcha code" onclick="this.src='./code.php?'+Math.random()"> <div id="code-result"></div> </body> <script> let formCode = document.getElementById("captcha_form"); let resultBox = document.getElementById("code-result"); formCode.onsubmit = function(){ let xhr = new XMLHttpRequest(); xhr.open("POST","./formSubmit.php"); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ resultBox.innerHTML = xhr.responseText; } } } let inputBox = document.querySelector("input[name='code']"); xhr.send("code="+inputBox.value); return false; } </script>
后台处理部分
<?php session_start(); $userCode = strtoupper($_POST["code"]); echo $userCode == $_SESSION["code"]?"OK":"Error Captcha Code"; ?>