序列化元素:
做项目的时候,表单是必不可少的,经常用来提交数据,例如注册、登陆等。常规的方法是使表单提交到另外一个页面,整个浏览器都会被刷新,而使用Ajax技术则能够异步地提交表单,并将服务器返回的数据显示在当前页面中。
表单为:
<form id="form1" 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" >
为了获取数据,必须将字段的值逐个添加到data参数中,代码如下:
$("#send").click(function(){ $.get("get1.php", { username : $("#username").val(); content : $("#content").val(); } , function (data, textStatus){ alert(textStatus); $("#resText").html(data); // 把返回的数据添加到页面上 } ); })
采用序列化的方法为:
$("#send").click(function(){ $.get("get1.php", $("#form1").serialize() , function (data, textStatus){ alert(textStatus); $("#resText").html(data); // 把返回的数据添加到页面上 } ); })