rlann

php处理ajax

首先安装wamp,若安装过mysql则终止进程防止冲突,可以访问localhost说明成功。在www目录下新建项目,使用localhost访问。

php:

<?php
    //3.获取ajax传过来的内容处理
    header("content-Type:text/text;charset=utf-8");
    
    $username=$_POST[\'name\'];
    if($username==\'admin\'){
        echo \'{"inf":"该用户名不合法","sta":"0"}\';
    }
    else if($username==\'richard\'){
        echo \'{"inf":"该用户名已被注册","sta":"1"}\';
    }
    else{
        echo \'{"inf":"该用户名可以注册","sta":"2"}\';
    }
    
?>

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .green{
                color: green;
            }
            .red{
                color: red;
            }
        </style>
        <script>
            window.onload=function(){
            
                function id(id){
                    return document.getElementById(id);
                }

                function ajax(){
                    var oAjax=new XMLHttpRequest();
                    return oAjax;
                }

                id(\'username\').onkeyup=function(){
                
                //1 建立ajax引擎
                    var xhr=ajax();
                //3 php后端操作
                    var url=\'/m18AjaxT/checkNameJson.php?name=\'+id(\'username\').value;
                    xhr.open(\'POST\',url,true);
                    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    var data="name="+id(\'username\').value;
                //2 发送请求,get用null,因为通过url发送
                    xhr.send(data);
                    xhr.onreadystatechange=function(){
                        if(xhr.readyState==4 && xhr.status==200){
                //4 渲染dom        
                            var information=JSON.parse(xhr.responseText).inf;
                            var sta=JSON.parse(xhr.responseText).sta;
                            id(\'inf\').innerHTML=information;
                            if(sta==0){
                                id(\'inf\').className="red";
                            }else if(sta==1){
                                id(\'inf\').className="red";
                            }else{
                                id(\'inf\').className="green";
                            }
                        }
                    }
                }
                
            }
        </script>
        

    </head>
    <body>
    <form action="" method="get">
        username:<input type="text" id="username" />
        <input type="button" name="btn" id="btn" value="验证" />

    </form>
    
        <span id="inf">this is infomation</span>
    
    </body>
</html>

 

发表于 2017-05-18 20:37  梦见一只羊  阅读(164)  评论(0编辑  收藏  举报
 

分类:

技术点:

相关文章: