包含一个index.jsp 和test.js
test.js
//jquery创建一个对象student 开始部分
student = $.student = ({
// 对象的属性
name : "张三",
age : "20",
height : "",
weight : "60kg",
phone : "",
sex : "男",
hobby : "",
school : "",
// 对象的方法
// index.jsp通过$(document).ready(function()
// {student.show();});执行show方法,把对象的属性赋值到页面中
show : function() {
$("#name").val(student.name);
$("#age").val(student.age);
$("#man").attr("checked","true");//radio默认选择-男
$("#checkbox1").attr("checked","true");//id=checkbox1的勾选
$("#schoollist").val("未选择学校");//为选择学校是给他一个默认值
// $("#schoollist").attr("checked","true");
},
goschool : function() {
// ps以下定义的值在实际项目中大多是通过ajax从后台获取的
$("#school").val("去学校...");// 按钮点击后,改变按钮的值
$("#school").attr("disabled", "true");// 按钮点击后使其不能在点.
var ss = "到学校了";
$("#backschool").append(ss);// 向index.jsp页面中id=backschool的div插入值
// student.eat();//方法之间互相调用
},
eat : function() {
$("#eat").val("开始吃饭");
$("#eat").attr("disabled", "true");
var s = "饭吃完了";
var s1 = "没吃饱";
var html = '<ul><li id="backeat1">' + s + '</li ><li id="backeat2">'
+ s1 + '</li></ul>';// 想页面中添加html,显示eat()返回的值
$("#backeat").append(html);
},
/*微博关注的效果*/
see : function(param){
var v =param.value;
$("#see").val((v=="关注"?"取消":"关注"));
},
// 页面提交表单,调用此方法
submitform:function(){
//获取页面input的值 ------http://www.jb51.net/article/23122.htm
var phone = $("#phone")[0].value;
var school = $("#schoollist")[0].value;//未选择学校的值
alert(school);
//获取表单的属性
var form = $("form[id='form']");
this.formParam = form.serialize();
this.action = form.attr("action");
//alert(this.action);
this.params = this.formParam;
alert(this.params);
//调用ajax
this.ajax();
},
ajax : function() {
$.ajax({
type : "post",
url : "this.action",
// data : "student.name=" + name,//data: "name=John&location=Boston",
data:this.params,//实体类,在后台通过student.get("name")等取值;
dataType : "json",
success : function(data, index) {
alert(data["errorMsg"]);//errorMsg,msg都是后台返回的值
$("#height").val(data["height"]);//将值返回到页面中id="id"的input或div等元素中。
}
});
}
ajax1 : function() {
var name = $("#name")[0].value;//获取input的值
if($("#name").val()== ""){
alert("姓名不能为空");
return false;
}
if($("#height").val()== ""){
alert("身高不能为空");
return false;
}
$.ajax({
type : "post",
url : "LoginServlet",
data: "name="+name,
success : function(msg) {
$("#age").val(msg);
}
});
}
});
//jquery创建一个对象student 结束地方
//普通js
//只能输入数字
function checkPositiveInteger(obj){
obj.value=obj.value.replace(/\D/g,'');
}
//只能输入字母
function checkLetter(obj){
obj.value=obj.value.replace(/[^a-zA-Z]+$/,'');
}
//只能输入汉字
function checkChinese(obj){
obj.value=obj.value.replace(/[^\u4E00-\u9FA5]/g,'');
}
//只能输入英文字母和数字
function checkLettersAndNumbers(obj){
obj.value=obj.value.replace(/[^\w\.\/]/ig,'');
}
//座机
function checkPhone(obj){
obj.value=obj.value.replace(/[^\d-]/g,'');
}
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>div布局</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery1.3.2.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<script type="text/javascript">
$(document).ready(function() {
student.show();//页面加载完后执行
});
</script>
</head>
<body>
<form action="actionname" method="post" id="form">
姓名:<input type="text" name="student.name" id="name">
<br/><!--这里的student为实体类 -->
年龄:<input type="text" name="student.age" id="age" οnkeyup="checkPositiveInteger(this)" onafterpaste="checkPositiveInteger(this)">
(只能数字)<br/>
身高:<input type="text" name="student.height" id="height"><br/>
体重:<input type="text" name="student.weight" id="weight"><br/>
座机:<input type="text" name="student.phone" id="phone"><br/>
性别:<input type="radio" name="student.sex" id="man" value="男">男
<input type="radio" name="student.sex" id="woman" value="女">女<br/>
爱好:<input type="checkbox" name="student.hobby" id="checkbox1" value="游泳">游泳
<input type="checkbox" name="student.hobby" id="checkbox2" value="下棋">下棋
<input type="checkbox" name="student.hobby" id="checkbox3" value="爬山">爬山 <br/>
学校:<select name="student.school">
<option id="schoollist">学校列表</option>
<option value="北京大学">北京大学</option>
<option value="清华大学">清华大学</option>
<option value="家里蹲的">家里蹲的</option>
<option value="中南财大">中南财大</option>
<option value="自学成才">自学成才</option>
</select><br/>
<input type="button" id="school" οnclick="student.goschool()" value="调用上学方法"/><!--这里的student为jquery对象 -->
<div id="backschool"></div>
<br/>
<input type="button" id="eat" οnclick="student.eat()" value="调用吃饭方法"/><br/>
<div id="backeat"></div>
微博关注效果:<input type="button" id="see" οnclick="student.see(this)" value="关注"/>
<input type="button" id="submit" οnclick="student.submitform()" value="提交表单"/>
</form>
</body>
</html>
直接复制进去就可以运行