jQuery中發送Ajax請求時序列化元素

Author: 劉老師(Aaron Lau) 武漢長樂教育,武漢PHP培訓課程,版權所有,轉載請注明!

jQuery中發送Ajax請求時序列化元素

本課程主要內容概要

  1. serialize()方法
  2. serializeArray()方法
  3. $.param()方法

1. serialize()方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
 <!--   引入jQuery -->
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
       $("#send").click(function(){
            $.get("get1.php", 
                $("#form1").serialize(),
                function (data){
                    $("#resText").html(data); // 把返回的數據添加到頁面上
                }
            );
       })
    })
</script>
</head>
<body>
<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" >
</div>

</body>
</html>

radiocheckbox使用serialize()方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
 <!--   引入jQuery -->
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
       $("#send").click(function(){
            var $data =  $(":checkbox,:radio").serialize();
            alert( $data );
       })
    })
</script>
</head>
<body>

<input type="checkbox" name="check" value="1" checked="checked"/>籃球<br/>
<input type="checkbox" name="check" value="2" />足球<br/>
<input type="checkbox" name="check" value="3" />乒乓球<br/>
<input type="checkbox" name="check" value="4" />羽毛球<br/>

<input type="radio" name="radio" value="1" checked="checked"/>籃球<br/>
<input type="radio" name="radio" value="2" />足球<br/>
<input type="radio" name="radio" value="3" />乒乓球<br/>
<input type="radio" name="radio" value="4" />羽毛球<br/>

<button id="send">提交</button>

</body>
</html>

2. serializeArray()方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <!--   引入jQuery -->
<script src="../scripts/jquery.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function(){
         var fields = $(":checkbox,:radio").serializeArray();
         console.log(fields);// chrome輸出
         $.each( fields, function(i, field){
            $("#results").append(field.value + " , ");
        });
   })
   </script>
</head>
<body>
<p id="results"><b>結果:</b> </p>

<input type="checkbox" name="check" value="1" checked="checked"/>籃球<br/>
<input type="checkbox" name="check" value="2" checked="checked"/>足球<br/>
<input type="checkbox" name="check" value="3" checked="checked"/>乒乓球<br/>
<input type="checkbox" name="check" value="4" />羽毛球<br/>

<input type="radio" name="radio" value="1" checked="checked"/>籃球<br/>
<input type="radio" name="radio" value="2" />足球<br/>
<input type="radio" name="radio" value="3" />乒乓球<br/>
<input type="radio" name="radio" value="4" />羽毛球<br/>

</body>
</html>

3. $.param()方法

該方法是serialize()方法的核心,用來對一個數組或對象按照key/value進行序列化

$(function(){
    var obj={a:1,b:2,c:3};
    var  k  = $.param(obj);
    alert(k)        // 輸出  a=1&b=2&c=3
})
上一篇課程 下一篇課程

學生登錄