ajax实例小功能 2018年9月19日 - 线上培训班课后作业

首页 > 博客列表 > ajax实例小功能 2018年9月19日

博主信息

博文 33

粉丝 0

访问量 20101

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<script src="./jquery.js"></script>
    <title>$.post实现用户登录</title>
</head>
<body>
<h3>用户登录$.ajax()</h3>
<p><label for="name">用户名:</label><input type="name" id="name" name="name"></p>
<p><label for="password">密码:</label><input type="password" id="password" name="password"></p>
<p><button>提交</button></p>
<p id = "msg"></p>
<script type="text/javascript">
    $(function(){
        $('button').click(function(){
            if($('#name').val().length == 0){
                $('#msg').html('<font style="color:red">邮箱不能为空</font>')
                return false
            }
            if($('#password').val().length == 0){
                $('#msg').html('<font style="color:red">密码不能为空</font>')
                return false
            }

            $.post(
                //处理的php脚本url
                './handle.php',
                //传送数据 格式为{name:value,}
                {name:$('#name').val(),password:$('#password').val()},
           
                //成功的回调函数 状态吗
                function(data,status,xhr){
                    console.log(status)
                    if(status==='success'){
                    // console.log(status)
                        $('#msg').html(data.msg)
                    }
                },
                //选择传送数据
                'json'
                )

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

运行实例 »

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

php:脚本：handle.php

实例

<?php
$name = fn($_POST['name']);
$pwd = fn($_POST['password']);
$pdo = new PDO('mysql:host=localhost;dbname=test','abc','abc');
$sql = "SELECT count(*) FROM `user` WHERE `name`=:name AND `pwd`=:pwd";
$stmt = $pdo->prepare($sql);
$where['name'] = $name;
$where['pwd'] = $pwd;
$stmt->execute($where);
if($stmt->fetchColumn()){
	$res=['status'=>1,'msg'=>"登陆成功"];
}else{
	$res=['status'=>2,'msg'=>"用户名或密码失败"];
}
echo json_encode($res);

function fn($a){
	return htmlspecialchars(trim($a));
}
?>

运行实例 »

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

地域三级联动：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./jquery-3.3.1.min.js"></script>
    <title>三级联动</title>
    <style>
		select{width:80px;height:20px;line-height:20px}
    </style>
</head>
<body>
<select name="pro" id="pro">pro</select>
<select name="city" id="city"></select>
<select name="area" id="area"></select>
<script>
	$(function(){
		$.getJSON('./pro.json',function(data){
			let option = "<option>请选择省</option>"
			$.each(data,function(i){
				option += "<option value='"+data[i].id+"'>"+data[i].pro+"</option>"
			})
				$("#pro").html(option)
		})

		$('#pro').change(function(){
			let upid = $(this).val()
			let option=""
			$.getJSON('./city.json',function(data){
				$.each(data,function(i){
					if(data[i].parentid == upid){
						option += "<option value='"+data[i].id+"'>"+data[i].city+"</option>"
					}
				})
					$("#city").html(option)
			})
		})

		$('#city').change(function(){
			let upid = $(this).val()
			let option=""
			$.getJSON('./area.json',function(data){
				$.each(data,function(i){
				if(data[i].parentid == upid){
					option += "<option value='"+data[i].id+"'>"+data[i].area+"</option>"
				}
				})
				$("#area").html(option)
			})
		})
	})
</script>
</body>
</html>

运行实例 »

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

批改状态：合格

老师批语：