首页手记 jquery插件-Validation，Ajax全接触

jquery插件-Validation，Ajax全接触

标签：

JQuery

jquery插件-Validation
1、基本验证方法
【required必填，remote远程效验，minlength最小长度，maxlength最大长度，rangelength长度范围，min最小值，max最大值，range值范围，email Email格式，url URL格式，date 日期，dateISO ISO日期(只能是年月日)，number 数字，digits整数，equalTo与另一个元素值相等(比如确认密码)。】

2、高级API
1、valid方法，rules方法
valid()---检查表单是否填写正确，$("#chenk").click(function(){ alert($("#demoForm").valid() ? "填写正确！"："填写错误") })
rules()---获取表单元素的效验规则，rules（"add",rules）向表单元素增加效验规则，rules（"remove",rules）删除表单效验规则
2、validator对象
validate方法返回Validator对象，
validator.form()验证表单是否有效，validator.element(element)验证某个元素是否有效，validator.resetForm()把表单恢复到验证前原来的状态，

3、选择器扩展
【:blank 选择所有值为空的元素，:filled选择所有值不为空的元素，:unchecked选择所有没有被选中的元素】

4、自定义验证方法
如：$.validator.addMethod("postcod",function(value,element,params){
var postcode=/^[0-9]{6}/; //正则表达式0-9个6位数
return this.optional(element) || (postcode.test(value));},"请填写正确的邮编！")
然后rules:{postcode:true }

Ajax全接触
1、概念
(1)运用html+css实现页面，(2)运用XMLHttpRequest和web服务器进行数据的异步交换，(3)运用JavaScript操作Dom，实现动态局部刷新；

2、http请求
(1)浏览器建立TCP连接 (2)浏览器发送请求 (3)浏览器发送请求头信息 (4)服务器应答 (5)服务器发送应答头信息 (6)服务器发送数据 (7)服务器关闭TCP

3、get/post 方法
get：信息获取，使用URL传递参数，
post：修改服务器资源

4、http状态码，首位数字定义了状态码的类型
1xx：信息类，
2xx：成功，200 ok
3xx：重定向，请求没成功
4xx：客户端错误，404 not
Found,文档不存在
5xx：服务器错误，500

5、XMLHttpRequest发送请求
open(method,url,true)
send(string)

6、XMLHttpRequest取得响应

7、案例
【html】
<label>请输入员工编号：</label>
<input type="text" id="keyword" />
<button id="search">查询</button>
<p id="searchResult"></p>
<h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>

【js--XMLHttpRequestJson】
<script>
document.getElementById("search").onclick = function() {
var request = new XMLHttpRequest();
request.open("GET", "serverjson.php?number=" + document.getElementById("keyword").value);
request.send();
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) {
var data = JSON.parse(request.responseText);
if (data.success) {
document.getElementById("searchResult").innerHTML = data.msg;
} else {
document.getElementById("searchResult").innerHTML = "出现错误：" + data.msg;
}
} else {
alert("发生错误：" + request.status);
}
}
}
}
document.getElementById("save").onclick = function() {
var request = new XMLHttpRequest();
request.open("POST", "serverjson.php");
var data = "name=" + document.getElementById("staffName").value

"&number=" + document.getElementById("staffNumber").value
"&sex=" + document.getElementById("staffSex").value
"&job=" + document.getElementById("staffJob").value;
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) {
var data = JSON.parse(request.responseText);
if (data.success) {
document.getElementById("createResult").innerHTML = data.msg;
} else {
document.getElementById("createResult").innerHTML = "出现错误：" + data.msg;
}
} else {
alert("发生错误：" + request.status);
}
}
}
}
</script>

【js--XMLHttpRequestJequry】
<script>
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type: "GET",
url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(),
dataType: "json",
success: function(data) {
if (data.success) {
$("#searchResult").html(data.msg);
} else {
$("#searchResult").html("出现错误：" + data.msg);
}
},
error: function(jqXHR){
alert("发生错误：" + jqXHR.status);
},
});
});
$("#save").click(function(){
$.ajax({
type: "POST",
url: "serverjson.php",
data: {
name: $("#staffName").val(),
number: $("#staffNumber").val(),
sex: $("#staffSex").val(),
job: $("#staffJob").val()
},
dataType: "json",
success: function(data){
if (data.success) {
$("#createResult").html(data.msg);
} else {
$("#createResult").html("出现错误：" + data.msg);
}
},
error: function(jqXHR){
alert("发生错误：" + jqXHR.status);
},
});
});
});
</script>