7.14号学习itcast ajax视频笔记4

最新推荐文章于 2023-01-14 23:14:10 发布

vzhchv0012

最新推荐文章于 2023-01-14 23:14:10 发布

阅读量102

点赞数

分类专栏： ajax 文章标签： Ajax jQuery JavaScript HTML XML ViewUI

本文链接：https://blog.csdn.net/vzhchv0012/article/details/83429901

版权

ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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="校验" οnclick="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="校验" οnclick="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);
    //完成交互

}

vzhchv0012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7.14号学习itcast ajax视频笔记4

1.用jquery对象来进行简单的验证例子,在这例子里分get和post两种方式分别写例子,还有纯文本和xml两种返回用户信息格式get方法返回纯文本文件:1.zhc.html&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loo...
复制链接

扫一扫