序列化元素

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>序列化元素</title>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
<form action="#" id="form1">
<p>评论</p>
<p>姓名: <input type="text" id="username"> </p>
<p>内容: <input type="text" id="content"> </p>
<p><input type="button" name="" value="提交" id="send"></p>
<div id="resText">

</div>
</form>

<script type="text/javascript">
$("#send").click(function() {
  $.get('get.php',{
    username : $("#username").val(),
    content : $("#content").val()
  }, function(data) {
  $("#resText").html(data);
  });
});

</script>


</body>
</html>

(1)与Jquery中的其他方法一样,serialize()方法也是作用于jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求。

通过使用serialize()方法,可以把刚才的代码改成以下

<script type="text/javascript">
$("#send").click(function() {
  $.get('get.php',$("#form1").serialize(), function(data) {
    $("#resText").html(data);
  });
});
</script>

加载get.php代码如下

<?php
  header("Content-Type:text/html;charset=utf-8");
  echo "<div class='comments'><strong>{$_GET['username']}:</strong><span>{$_GET['content']}</span></div>";
?>

posted @ 2017-04-20 18:39  代码小精灵  阅读(241)  评论(0编辑  收藏  举报