您的位置：首页 > 其它

用ajax判断输入框输入内容是否符合要求

2017-03-29 17:04 477 查看

用ajax实现

一、get方式

html文件

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<script type="text/javascript">
function check(){
var xhr = new XMLHttpRequest();
var userName = document.getElementById("userName").value; //获取需要判断的输入框的值
userName = encodeURIComponent(userName);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
document.getElementById("Name").innerHTML = xhr.responseText;
}
}
xhr.open("get","./ajax.php?userName="+userName); //*.open(get/post,发送请求的路径);
xhr.send(null); //发送请求
}
</script>

</head>

<body>

用户名：<input type="text" onblur="check();" id="userName">
<div id="Name"></div>

</body>

</html>

ajax.php文件

<?php

header("content-type:text/html;charset:utf-8;");

$userName = $_GET['userName'];

if($userName == "") echo "<font style='font-size:5px;color:red;'>必填项</font>";

else if($userName == "22") echo "<font style='font-size:5px;color:red;'>该用户名已存在</font>";

else echo "<font style='font-size:5px;color:green;'>该账户可以注册</font>";

?>

二、post方式

html文件

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<script type="text/javascript">
function check(){
var xhr = new XMLHttpRequest();
var userName = document.getElementById('userName').value;

userName = encodeURIComponent(userName);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) document.getElementById('checkName').innerHTML = xhr.responseText;
}
xhr.open("post","./ajax-post.php");

//form表单把数据转化为XML格式传递到服务器端
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); //设置header头信息，把传递的数据转化为XML格式
var info = "userName="+userName; //定义字符串info用于传递数据
xhr.send(info);

}
</script>

</head>

<body>
用户名：<input type="text" id="userName" onblur="check();">
<div id="checkName"></div>

</body>

</html>

ajax-post.php文件

<?php

$userName = $_POST['userName'];

if($userName == "") echo "<font style='font-size:5px;color:red;'>必填项</font>";

else if($userName == "22") echo "<font style='font-size:5px;color:red;'>已被注册</font>";

else echo "<font style='font-size:5px;color:green;'>该账户可以注册</font>";

?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax

相关文章推荐

新的分享

章节导航