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

来源：互联网发布：李炯浩被诱拐事件知乎编辑：程序博客网时间：2024/04/30 14:32

$.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>