博客列表 >ajax实现省/市/县三联下拉框联动查询功能0919

ajax实现省/市/县三联下拉框联动查询功能0919

郭稳重啊的博客
郭稳重啊的博客原创
2018年09月21日 19:39:311058浏览

0919作业

编程1: $.post()实现用户注册


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.post()</title>
</head>
<body>
<h3>用户登录$.post()</h3>
<p><label for="email">邮箱:</label><input type="email" id="email" name="email"></p>
<p><label for="password">邮箱:</label><input type="password" id="password" name="password"></p>
<p><button>提交</button></p>

<script src="../0917/lib/jquery.js"></script>
<script>
    $('button').click(function(){
        if ($('#email').val().length === 0)
        {
            $('#email')
               .after('<span style="color:red">邮箱不能为空</span>')
               .next()
               .fadeOut(2000);
            $('#email').focus();
            return false;
        }

        if ($('#password').val().length === 0) {
            $('#password')
               .after('<span style="color:red">密码不能为空</span>')
               .next()
               .fadeOut(2000);
            $('#password').focus();
            return false;
        } else if($('#password').val().length < 6) {
            $('#password')
               .after('<span style="color:red">密码不能少于6位</span>')
               .next()
               .fadeOut(2000);
            $('#password').focus();
            return false;
        }
        //$.post到服务器上去验证请求的脚本
        $.post(
              'inc/check.php',      // 处理post请求的php脚本

            // 要发送到服务器上的数据
            // 查询字符串形式的数据
            // 'email='+$('#email').val()+'&password='+$('#password').val(),
            // 对象字面量形式,最终也会转为查询字符串
            {
                email: $('#email').val(),
                password: $('#password').val()
            },
            // 请求成功的回调
            function(data,status,xhr) {
                // console.log(data,status,xhr);  // 查看返回的数据
                // 实际开发过程中,大多只用到data,status和xhr极少使用,另外,data和status也可用xhr对象获取
                console.log($(this));
                // console.log(data.message);
                if (data.status === 1) {
                    $('button')     // 选择当前按钮
                        .after('<span style="color: green"></span>')    // 在按钮后添加一个<span>用来显示提示信息
                        .next()     // 切换到button的下一个兄弟元素,这时就是刚刚添加的<span>
                        .html(data.message) // 设置<span>中的文本内容
                        .fadeOut(2000);     // 将<span>的内容2秒后淡出
                } else {
                    $('button')
                        .after('<span style="color: red"></span>')
                        .next()
                        .html(data.message)
                        .fadeOut(2000);
                }
            },
           // 返回的数据类型
            'json'
        );
    })
</script>
</body>
</html>

运行实例 »

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

2. 编程: 用ajax实现省/市/县三联下拉框联动查询功能,可使用json完成。


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业:三级联动菜单</title>
</head>
<body>
省 <select name="" id="pro"></select>
市 <select name="" id="city"></select>
区 <select name="" id="area"></select>
<p id="addr"></p>
<script src="../0917/lib/jquery.js"></script>
<script>
    $(function(){
        $.getJSON('inc/1.json',function(data){
            let option = '<option value="">选择(省)</option>';
            $.each(data,function(i){
                option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
            });
            $('#pro').html(option);

        });

        $('#pro').change(function(){
            //查看当前选择中元素内容
            console.log($(this).find(':selected').text());
           $('#addr').html($('#pro').find(':selected').text());

            $.getJSON('inc/2.json',function(data){
               let option = '<option value="">选择(市)</option>';
                $.each(data,function(i){
                    if (data[i].proId == $('#pro').val()) {
                        option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
                    }
                });
                $('#city').html(option);
            });
        });
        $('#city').change(function(){
            //查看当前选择中元素内容
            console.log($(this).find(':selected').text());
            $('#addr').html($('#pro').find(':selected').text()+"---"+$('#city').find(':selected').text());
            $.getJSON('inc/3.json',function(data){
                let option = '<option value="">选择(县区)</option>';
                $.each(data,function(i){
                    if (data[i].cityId == $('#city').val()) {
                        option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
                    }
                });
                $('#area').html(option);
            });
        });

        $('#area').change(function(){
            //查看当前选择中元素内容
            console.log($(this).find(':selected').text());
$('#addr').html($('#pro').find(':selected').text()+"---"+$('#city').find(':selected').text()+"---"+$('#area').find(':selected').text());

        });
    })
</script>
</body>
</html>

运行实例 »

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

Y%]IL)02UR@7O}R)LU4Z}JR.png



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议