7.14号学习itcast ajax视频笔记4

vzhchv0010 · 发表于 2013-2-7 14:40:57

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对象. 自动转换对象.    var  jqueryobj = $(data); //获得jquery 对象的子节点 var message = jqueryobj.children(); //获取子节点中的内容 var result = message.text(); //将内容设置到页面中去 var resultResult = $("#result"); resultResult.html(result); //完成交互}

		自动登录	找回密码
密码			立即注册

7.14号学习itcast ajax视频 笔记4

浏览过的版块

7.14号学习itcast ajax视频笔记4