jQuery学习笔录12（jQuery和ajax2-$.ajax(),元素序列化serialize()）

最新推荐文章于 2021-01-10 22:47:48 发布

壁橱里的老王

最新推荐文章于 2021-01-10 22:47:48 发布

阅读量2.8k

点赞数

分类专栏： jQuery Ajax javascript Web 文章标签： jquery ajax function email xml server

本文链接：https://blog.csdn.net/Jessie_J_Wang/article/details/7668853

版权

Web 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

javascript

25 篇文章 0 订阅

订阅专栏

jQuery

23 篇文章 0 订阅

订阅专栏

$.ajax(option),该方法只有1个参数，但这个对象里面包含了$.ajax()所需要的请求设置以及回调函数等信息，参数以key/value的形式存在。

serialize()：他作用于一个jquery对象，能够将DOM元素内容序列化为字符串。

例子

ajax3

<head runat="server">
    <title>Untitled Page</title>
    <script src="../scriptJquery/jquery-1.3.2.min.js"></script>
</head>
<body>
    <form id="form1" runat="server" action="#">
        <p>评论</p>
        <p>姓名：<input type="text" name="username" id="username" /></p>
        <p>内容：<textarea name="content" id="content" rows="2" cols="20"></textarea></p>
        <p><input type="button" id="send" value="提交" /></p>
    </form>
    <div class="comment">已有评论：</div>
        <div id="resText"></div>
</body>
</html>
<script>
$("#send").click(function(){
    $("#resText").text($("#form1").serialize());
})
</script>

serializeArray()：该方法将DOM元素序列化后，返回JSON格式的数据。

<script>
$("#send").click(function(){
    var a=$("#form1").serializeArray();
    console.log(a);//可以在FIREBUG中看到返回的是object，因此可以用each进行输出
    $.each(a,function(i,b){
        $("#resText").append(b.value+",")
    })
    

})
</script>

jQuery 中的ajax全局变量

<head runat="server">
    <title>Untitled Page</title>
    <script src="../scriptJquery/jquery-1.3.2.min.js"></script>
    <style>
        #loading{display:none}
    </style>
</head>
<body>
    <form id="form1" runat="server" action="#">
        <p>评论</p>
        <p>姓名：<input type="text" name="username" id="username" /></p>
        <p>内容：<textarea name="content" id="content" rows="2" cols="20"></textarea></p>
        <p><input type="button" id="send" value="提交" /></p>
    </form>
    <div class="comment">已有评论：</div>
    <div id="loading">加载中。。</div>
        <div id="resText"></div>
</body>
</html>
<script>
$("#send").click(function(){
    $.get("test2.aspx",{
    username:$("#username").val(),
    content:$("#content").val()}
   ,function(data,textstatus){
        $("#resText").html(data);
    })
})

    $("#loading").ajaxStart(function(){
        $(this).show();
    })
    $("#loading").ajaxStop(function(){
        $(this).hide();
    })
</script>

$.ajax()

append(content)

向每个匹配的元素内部追加内容。

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

appendTo(content)

把所有匹配的元素追加到另一个、指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

ajax2.aspx

<script>

$.ajax({
    url:'ajax.xml',
    type:'get',
    dataType:'xml',
    timeout:10000,
    cache:false,//禁用缓存
    error: function(xml){
        alert('加载xml文档出错');
    },
    success:function(xml){
            var flag=$("<ul/>"); //建立一个代码片段
          //解析xml，这和解析DOM一样，也可以用find(),children()等函数来解析和用each()方法来遍历
          //，另外也可以用text()和attr()方法来获取节点文本和属性。
          $(xml).find("student").each(function(i){//遍历所有student节点
            var id=$(this).children("id"); //获取id节点
            var id_value=id.text();        //获取节点文本
            var email_value=$(this).attr("email") //获取student下的email属性
            alert(id_value)
            flag.append("<li>"+id_value+"-"+email_value+"</li>");
          });
          flag.appendTo("#resText");
    }
})

  
</script>

ajax.xml

<?xml version="1.0" encoding="utf-8" ?>
<stulist>
  <student email="1@1.com">
    <name>zhangsan</name>
    <id>1</id>
  </student>
  <student email="2@2.com">
    <name>lisi</name>
    <id>2</id>
  </student>
</stulist>

壁橱里的老王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery学习笔录12（jQuery和ajax2-$.ajax(),元素序列化serialize()）

$.ajax(option),该方法只有1个参数，但这个对象里面包含了$.ajax()所需要的请求设置以及回调函数等信息，参数以key/value的形式存在。serialize()：他作用于一个jquery对象，能够将DOM元素内容序列化为字符串。例子ajax3 Untitled Page 评论姓名：
复制链接

扫一扫