ajax实例代码及效果

2016-11-24 08:27:40来源:CSDN作者:liuxuan12417人点击

第七城市

ps:不足之处,请大家多多指教
以下html文件都要服务器环境下打开。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>ceshi</title>    <script type="text/javascript" src="ajax.js"></script></head><body>    帐号:<input type="text" id="username">    密码:<input type="password" id="password">    <input type="button" value="提交" onclick="checkname()"></body><script type="text/javascript">    function checkname() {        var username = document.getElementById('username').value;        //1、创建对象        var xhr = new XMLHttpRequest();        //2、连接服务器        xhr.open('GET','name.json',true);//json数据内容如下图3        //3、向服务器发送请求        xhr.send(null);        //4、请求完成,响应就绪        xhr.onreadystatechange=function(){        if (xhr.readyState==4) {            if (xhr.status==200) {//表示已经获取到文件。                var str = JSON.parse(xhr.responseText);//将json数据转换成js数组对                       alert(str);//输出结果如图4 。                           }else{                alert(xhr.statusText)//如果没有获取name.json的数据,即服务器找不到这个文件,则执行该段代码。输出框会显示“Not Found”。如果是alert(xhr.status),则显示404;                }            }        }        };</script></html>

3.png

4.png

<script type="text/javascript">    function checkname() {        var username = document.getElementById('username').value;        var boo = false;        //1、创建对象        var xhr = new XMLHttpRequest();        //2、连接服务器        xhr.open('GET','name1.json',true);        //3、向服务器发送请求        xhr.send(null);        //4、请求完成,响应就绪        xhr.onreadystatechange=function(){        if (xhr.readyState==4) {            if (xhr.status==200) {                var str = JSON.parse(xhr.responseText);//将json数据转换成js数组对象                alert(str)                               for (var i = 0; i < str.length; i++) {                if (username == str[i]) {                    boo = true;                }             }//判断用户名是否已经存在,即输入的用户名是否存在与json文件中。            if (boo) {               alert("用户民已存在");            } else {                alert("用户名可以使用")            }            }        }        };     };</script>
第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台