標籤：style color io os 使用 java ar for 檔案
我的index.jsp
<body>
<a>點我擷取資料</a>
<table border=1px>
<tr>
<td>ID</td>
<td>姓名</td>
<td>地址</td>
</tr>
</table>
</body>
我的servlet:
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
List<User> list = new ArrayList<User>();
for (int i = 1; i < 11; i++) {
list.add(new User(i, "張x" + i, "北京" + i + "區"));
}
String strs = JSONArray.fromObject(list).toString();
PrintWriter out=response.getWriter();
out.print(strs);
我的js:
$(function() {
$("a").click(function(){
var tr = $("tr:last");
$.ajax({
url : "servlet/TestSer",
type : "POST",
//dataType:"JSON",
success : function(data) {
data=eval(data);
$.each(data, function() {
var ss = $("<tr><td>" + this.id+ "</td><td>" + this.name+ "</td><td>" + this.address+ "</td></tr>");
tr.after(ss);
tr = ss;
})
}
})
})
});
用$.ajax()這個方法取到的data是個字串，如果直接迴圈是得不到資料的，這裡有兩種方法解決：
1：是設定dataType:"JSON",
2：是data=eval(data);把data轉換成對象。
***************************************************************************************************************************
日期控制項
只需匯入js檔案
<script type="text/javascript" src="WdatePicker.js"></script>
出生日期
<input type="text" name="brondate" onClick="WdatePicker()" >
然後加上onClick時間就行!
表單驗證:
如果要修改錯誤樣式:
label.error {
color: red;
font-size: 14px;
background: url( error.jpg) 0px -2px no-repeat;
padding-left: 20px;
line-height: 20px;
}
使用validate.js必須先註冊事件:
表單.validate
$(function() {
$("#f").validate( {
}
)
})
標籤裡可以直接加上class=””;
(1) required:true 必輸欄位
(2) remote:"check.php" 使用ajax方法調用check.php驗證輸入值
(3) email:true 必須輸入正確格式的電子郵件
(4) url:true 必須輸入正確格式的網址
(5)date:true 必須輸入正確格式的日期 日期校正ie6出錯，慎用
(6)dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格 式，不驗證有效性
(7) number:true 必須輸入合法的數字(負數，小數)
(8) digits:true 必須輸入整數
(9) creditcard: 必須輸入合法的信用卡號
(10) equalTo:"#field" 輸入值必須和#field相同
(11)accept: 輸入擁有合法尾碼名的字串（上傳檔案的尾碼） (12)maxlength:5 輸入長度最多是5的字串(漢字算一個字元) (13)minlength:10 輸入長度最小是10的字串(漢字算一個字元) (14)rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字串")(漢字算一個字元)
(15)range:[5,10] 輸入值必須介於 5 和 10 之間
(16)max:5 輸入值不能大於5
(17)min:10 輸入值不能小於10
左邊的參數,不必帶值
比如:我要驗證郵箱
郵箱 <input type="text" name="email" class="email">
如果需要多個驗證則不必一個一個加class,用$(“表單”).validate({})的方式:
$(function() {
$("#f").validate( {
//驗證規則
rules : {
//欄位名字name
password : {
//當前欄位驗證規則
required : true,// 必填
minlength : 5,// 最小長度
maxlength : 10
//最大長度
},
age : {
required : true,
digits : true,//只能輸入整數
max : 100,// 最大值
min : 18
// 最小值
},
brondate : {
dateISO : true
},
file : {},
weight : {
number : true
},
loginname : {
remote : {
type : "POST",
url : "jsonservlet" //servlet
}
}
}
messages: { firstname: "請輸入姓名", email: {
required: "請輸入Email地址", email: "請輸入正確的email地址"
},
password: {
required: "請輸入密碼",
minlength: jQuery.format("密碼不能小於{0}個字 符")
},
confirm_password: { required: "請輸入確認密碼",
minlength: "確認密碼不能小於5個字元", equalTo: "兩次輸入密碼不一致不一致"
}
}
});
});
*****************************************************************
validate({})裡有不同的參數,其中rules : {}為驗證規則.
messages: {}可以修改錯誤提示資訊的提示內容!
form.js表單提交,匯入js
<script type="text/javascript" src="jquery.form.js"></script>
Html代碼為:
<form action="jsonservlet" id="f">
<input type="hidden" name="id">
姓名
<input type="text" name="name" class="required">
<br />
年齡
<input type="text" name="age">
<br />
密碼
<input type="password" name="password">
<br />
郵箱
<input type="text" name="email">
<br />
<input type="submit">
</form>
js代碼為:
(function() {
$("#f").submit(function() {
// 序列化表單
var data = $("#f").formSerialize();
alert(data);
$.ajax( {
url : "",
type : "POST",
//data:{name:""}
data : data,
success : function() {
}
});
return false;
});
// 註冊該form為一部提交
$("#f").ajaxForm(function(msg) {
alert(msg);
$("[name=id]").val(msg);
});
});
其中序列化表單相當於把表單的每個表單標籤裡的name和value以?後的參數=值的方式提交了過去.如下:(id是隱藏欄位沒賦值)
id=&name=%E5%BC%A0%E4%B8%89&age=30&password=123456789&email=zs%40qq.com
然後:
// 註冊該form為一部提交
$("#f").ajaxForm(function(msg) {
alert(msg);
$("[name=id]").val(msg);
});
可以用回呼函數判斷是否已有註冊名,如有給出提示,如果註冊成功,再跳轉頁面.
還可以把表單資料暫存到隱藏列裡面暫存,等到想提交的時候再提交!
ajax和servlet互動，表單日曆外掛程式，表單驗證，form.js
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
