前后端如何用json进行数据交互-0717

JSON: JSON是一种使用JS对象字面量语法书写的格式化文档.
支持的数据类型: 6种:Number, String, Boolean, Array, Object, Null
数字: 整数或浮点数
字符串: 在双引号中
逻辑值: true / false
数组字面量: [e1,e2,e3,...]
对象字百量: {x:1, y:2,...}
无值: null
JS处理JSON的二个常用函数:
JSON.parse(jsonStr): 将JSON格式字符串转换为js对象
JSON.stringift(obj): 将js对象转换为JSON格式字符串

表单验证：前段处理从服务器返回单JSON数据

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证：前段处理从服务器返回单JSON数据</title>
</head>
<body>
<h2>用户登录</h2>
<form action=""  name="login">
    <p>
        <label for="username">用户：</label>
        <input type="text" name="username" id="username" placeholder="UserName">
    </p>

    <p>
        <label for="email">邮箱：</label>
        <input type="text" id="email"  name="email" placeholder="example@email.com">
    </p>

    <p>
        <label for="password">密码:</label>
        <input type="text" id="password" name="password" placeholder="******">
    </p>

    <p>
        <label for="remember">记住我：</label>
        <select name="remember" id="remember">
            <option value="1"  selected>一天</option>
            <option value="7">一周</option>
            <option value="30">一月</option>
        </select>
    </p>

    <p>
        <button type="button" name="submit">提交</button>
    </p>
</form>


<script>
    var login = document.forms.namedItem('login');
    var btn = login.submit;
    var request = new XMLHttpRequest();


    login.username.addEventListener('blur',isEmpty,false);
    login.email.addEventListener('blur',isEmpty,false);
    login.password.addEventListener('blur',isEmpty,false);

    function isEmpty(ev) {
        if (ev.target.value.length === 0) {
            if (ev.target.nextElementSibling === null) {
                var tips = document.createElement('span');
                tips.style.color = 'red';
                switch (ev.target.name) {
                    case 'username':
                        tips.innerText = '用户名不能为空';
                        break;
                    case 'email':
                        tips.innerText = '邮箱不能为空';
                        break;
                    case 'password':
                        tips.innerText = '密码不能为空';
                        break;
                    default:
                        tips.innerText = '未定义错误';
                }
                ev.target.parentNode.appendChild(tips);
                ev.target.focus();
            }
        }


        login.username.addEventListener('input', clearTips, false);
        login.email.addEventListener('input', clearTips, false);
        login.password.addEventListener('input', clearTips, false);

        function clearTips(ev) {
            var tips = ev.target.nextElementSibling;
            if (tip !== null) {
                tips.parentNode.removeChild(tips);
            }
        }

        btn.addEventListener('click', check, false);

        function check(ev) {
            var username = login.username.value;
            var email = login.email.value;
            var password = login.password.value;
            var remember = login.remember.value;

            if (username.length === 0 || email.length === 0 || password.length === 0) {
                ev.target.removeEventListener('click', check, false);
                var blurEvent = new Event('blur');
                login.username.dispatchEvent(blurEvent);
                return false;
            }
            var data = 'username=' + username + '&email=' + email + '&password=' + password + '&remember=' + remember;
            request.addEventListener('readystatechange', successCallback, false);
            request.open('POST', 'php/check1.php', true);
            request.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=utf-8');
            request.send(data);
        }

        function successCallback(ev) {
            if (request.readyState === 4) {
                var obj = JSON.parse(request.responseText);
                var tips = document.createElement('span');
                var url = '';
                switch (obj.status) {
                    case 1:
                        tips.style.color = 'green';
                        tips.innerText = obj.message + ',正在跳转...';
                        url = 'php/admin.php';
                        break;
                    case 0:
                        tips.style.color = 'red';
                        tips.innerText = obj.message;
                        url = 'demo1.html'; // 也可以重新加载本页面
                        break;
                    default:
                        console.log('未知错误');
                        break;
                }

                btn.parentNode.appendChild(tips);
                setTimeout(function () {
                    location.href = url;
                }, 3000);
            }
        }

    }
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

如何从前端发送的JSON数据。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何从前端发送的JSON数据</title>
</head>
<body>
<h2>用户登录</h2>
<form action=""  name="login">
    <p>
        <label for="username">用户：</label>
        <input type="text" name="username" id="username" placeholder="UserName">
    </p>

    <p>
        <label for="email">邮箱：</label>
        <input type="text" id="email"  name="email" placeholder="example@email.com">
    </p>

    <p>
        <label for="password">密码:</label>
        <input type="text" id="password" name="password" placeholder="******">
    </p>

    <p>
        <label for="remember">记住我：</label>
        <select name="remember" id="remember">
            <option value="1"  selected>一天</option>
            <option value="7">一周</option>
            <option value="30">一月</option>
        </select>
    </p>

    <p>
        <button type="button" name="submit">提交</button>
    </p>
</form>


<script>
    var login = document.forms.namedItem('login');
    var btn = login.submit;
    var request = new XMLHttpRequest();


    login.username.addEventListener('blur',isEmpty,false);
    login.email.addEventListener('blur',isEmpty,false);
    login.password.addEventListener('blur',isEmpty,false);

    function isEmpty(ev) {
        if (ev.target.value.length === 0) {
            if (ev.target.nextElementSibling === null) {
                var tips = document.createElement('span');
                tips.style.color = 'red';
                switch (ev.target.name) {
                    case 'username':
                        tips.innerText = '用户名不能为空';
                        break;
                    case 'email':
                        tips.innerText = '邮箱不能为空';
                        break;
                    case 'password':
                        tips.innerText = '密码不能为空';
                        break;
                    default:
                        tips.innerText = '未定义错误';
                }
                ev.target.parentNode.appendChild(tips);
                ev.target.focus();
            }
        }


        login.username.addEventListener('input', clearTips, false);
        login.email.addEventListener('input', clearTips, false);
        login.password.addEventListener('input', clearTips, false);

        function clearTips(ev) {
            var tips = ev.target.nextElementSibling;
            if (tip !== null) {
                tips.parentNode.removeChild(tips);
            }
        }

        btn.addEventListener('click', check, false);

        function check(ev) {
            var username = login.username.value;
            var email = login.email.value;
            var password = login.password.value;
            var remember = login.remember.value;

            if (username.length === 0 || email.length === 0 || password.length === 0) {
                ev.target.removeEventListener('click', check, false);
                var blurEvent = new Event('blur');
                login.username.dispatchEvent(blurEvent);
                return false;
            }
            var obj = {
                username: username,
                email: email,
                password: password,
                remember: remember
            };
            var data = JSON.stringify(obj);
            request.addEventListener('readystatechange', successCallback, false);
            request.open('POST', 'php/check2.php', true);
            request.setRequestHeader('content-type', 'application/json;charset=utf-8');
            request.send(data);
        }

        function successCallback(ev) {
            if (request.readyState === 4) {
                var obj = JSON.parse(request.responseText);
                var tips = document.createElement('span');
                var url = '';
                switch (obj.status) {
                    case 1:
                        tips.style.color = 'green';
                        tips.innerText = obj.message + ',正在跳转...';
                        url = 'php/admin.php';
                        break;
                    case 0:
                        tips.style.color = 'red';
                        tips.innerText = obj.message;
                        url = 'demo1.html';
                        break;
                    default:
                        console.log('未知错误');
                        break;
                }

                btn.parentNode.appendChild(tips);
                setTimeout(function () {
                    location.href = url;
                }, 3000);
            }
        }

    }
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

实例

相关文章