1>注册时判断用户名密码是否正确
<%--
Created by IntelliJ IDEA.
User: 32519
Date: 2022/8/4
Time: 14:15
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script>
//json: 一种数据格式 {“name”:"value","age":"10"}
$(function (){
$("[name='username']").change(function (){
$.ajax({
type: "POST",//请求方式
url: "users.dd",//请求的url地址
data: "m=register01&username="+$(this).val(),//数据
success: function (msg) {//参数就是 服务器给客户端返回的数据
$("#info").text(msg);
if (msg == '用户名存在') {
$("[name='username']").val('');
}
}
});
});
});
</script>
<html>
<head>
<title>Title</title>
</head>
<body>
<form>
<p>
用户名:<input type="text" name="username" /> <span id="info"></span>
</p>
<p>
密码:<input type="password" name="password"/>
</p>
<p>
个人爱好:<input type="text" name="inter"/>
</p>
</form>
</body>
</html>
2>实现级联菜单【数据库取值】
<html>
<body>
<h2>Hello World!</h2>
</body>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<div>
<select name="pro">
<option value="-1">请选择</option>
</select>省
<select name="cities">
<option value="-1">请选择</option>
</select>市
</div>
<script>
$(function (){
//发送ajax请求,获取所有的省份信息
$.ajax({
type: "POST",//请求方式
url: "cities.dd",//请求的url地址
data: "m=getAllPro",//数据
dataType:"json",//如果不添加该属性,默认是字符串的格式
success: function(msg){//参数就是 服务器给客户端返回的数据
$(msg).each(function (i,v){
$op = $("<option value='"+v.cid+"'>"+v.cname+"</option>");
$("[name='pro']").append($op);
});
}
});
$("[name='pro']").change(function (){
var pid = $("[name='pro']").children(":selected").val();
$("[name='cities']").children().not(":first").remove();
if(pid!=-1){
//查找对应的城市
$.ajax({
type: "POST",//请求方式
url: "cities.dd",//请求的url地址
data: "m=getAllCities&pid="+pid,//数据
dataType:"json",//如果不添加该属性,默认是字符串的格式
success: function(msg){//参数就是 服务器给客户端返回的数据
$(msg).each(function (i,v){
$op = $("<option value='"+v.cid+"'>"+v.cname+"</option>");
$("[name='cities']").append($op);
});
}
});
}
});
});
</script>
</html>