jQuery学习笔录12（jQuery和ajax2-$.ajax(),元素序列化serialize()）
$.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方法，将它们添加到文档中的情况类似。
ajax2.aspxappendTo(content)
把所有匹配的元素追加到另一个、指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
<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="[email protected]"> <name>zhangsan</name> <id>1</id> </student> <student email="[email protected]"> <name>lisi</name> <id>2</id> </student> </stulist>