7.14号学习itcast ajax视频笔记4

vzhchv0010

浏览: 29725 次
性别:
来自: 北京

最近访客更多访客>>

吴兴鹏

xx5333

MYEYE_CAMEL

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

Ajax jQuery JavaScript HTML XML

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="校验" onclick="zhc()" />
    <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="校验" onclick="zhc()" />
    <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视频笔记5 | 7.14号学习itcast ajax视频笔记3

2009-07-14 21:59
浏览 968
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

7.14号学习itcast ajax视频笔记4

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

7.14号学习itcast ajax视频 笔记4

评论

发表评论

相关推荐

7.14号学习itcast ajax视频 笔记总结

7.14号学习itcast ajax视频 笔记5

7.14号学习itcast ajax视频 笔记3

7.14号学习itcast ajax视频 笔记2

7.14号学习itcast ajax视频 笔记1

7.14号学习itcast ajax视频 笔记

最近访客更多访客>>

7.14号学习itcast ajax视频笔记4

7.14号学习itcast ajax视频笔记总结

7.14号学习itcast ajax视频笔记5

7.14号学习itcast ajax视频笔记3

7.14号学习itcast ajax视频笔记2

7.14号学习itcast ajax视频笔记1

7.14号学习itcast ajax视频笔记