• ajax实例代码及效果


    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>
  • 相关阅读:
    关于 SQL Server 的事务隔离
    Joplin与阿里云OSS做同步
    vite配置vitepluginstyleimport插件后启动报错
    FireDAC组件快照
    mvn site:java.lang.NoClassDefFoundError: org/apache/maven/doxia/siterenderer/DocumentContent
    MySQL8 二进制日志
    MySQL8配置文件
    创建一个 autocomplete 输入系统 前端 + 后端
    5.Ceph 基础篇 认证
    修复 Elasticsearch 集群的常见错误和问题
  • 原文地址:https://www.cnblogs.com/jiandanshishu/p/12953330.html
Copyright © 2020-2023  润新知