7.14号学习itcast ajax视频 笔记4
1.用jquery对象来进行简单的验证例子,在这例子里分get和post两种方式分别写例子,还有纯文本和xml两种返回用户信息格式
get方法返回纯文本文件:
1.zhc.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>hehe</title> <script type="text/javascript" src="jslib/zhc.js"></script> <script type="text/javascript" src="jslib/jquery.js"></script></head><body> ========<br /> <input id="name" type="text" /> <input type="button" value="校验"/> <div id="result" ></div></body></html>
2.zhc.js
function zhc(){//juery中用#来返回节点 //jquery 方式查找 节点属性 # + 节点属性值 //document.getElementById("name").value拿到节点的值 //或者根据class 和标签名来找节点 //jquery返回的不是dom的节点,而是自己的一个对象,包装了 dom节点 var jqueryObj= $("#name"); //获取节点的值 var name = jqueryObj.val(); //向服务器端发送值 callback 不用加括号 $.get("zhc?name="+name,null,callback); //get 或post 返回的是文本数据 //代码继续向后运行 ,数据回来之后运行callback()}function callback(data){ //接收服务器返回的数据 //将服务器数据返回页面 var resultResult = $("#result"); //向jueryResult 中填充数据 resultResult.html(data); } 3.post方法返回xml文件:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>hehe</title> <script type="text/javascript" src="jslib/zhcjuqery.js"></script> <script type="text/javascript" src="jslib/jquery.js"></script></head><body> ========<br /> <input id="name" type="text" /> <input type="button" value="校验"/> <div id="result" ></div></body></html> 2.zhcjuqery.js
function zhcjuqery( ){ var jqueryObj= $("#name"); //获取节点的值 var name = jqueryObj.val(); //代码继续向后运行 ,数据回来之后运行callback() //javascript中,一个简单对象的定义方法 ,该对象没有任何属性和方法,可以用键值对往其中加入 //var obj = {name:zhangchao,age:20} ;冒号分割 $.ajax({ type: "POST" , url :"xml" , data:"name="+ name , //以上三个是发给服务器的 dataType : "xml" , //从服务器返回的数据格式. success :callback//回调函数的名字,并且是status=4 页面返回为200时调用该函数. });}function callback(data){ //接收服务器返回的数据 //将服务器数据返回页面 // var resultResult = $("#result"); //向jueryResult 中填充数据 // resultResult.html(data); //需要将data这个dom对象中的数据解析出来. //首先将dom对象转换成jquery对象. 自动转换对象. varjqueryobj = $(data); //获得jquery 对象的子节点 var message = jqueryobj.children(); //获取子节点中的内容 var result = message.text(); //将内容设置到页面中去 var resultResult = $("#result"); resultResult.html(result); //完成交互}
页:
[1]