1. 程式人生 > >jQuery使用serialize(),serializeArray()方法取得表單數據+字符串和對象類型兩種表單提交的方法

jQuery使用serialize(),serializeArray()方法取得表單數據+字符串和對象類型兩種表單提交的方法

var fun .ajax clas copy art 表單提交 post 姓名

轉載自: http://blog.csdn.net/zqtsx/article/details/28655717

原始form表單值獲取方式(手動):

[javascript] view plain copy
  1. $.ajax({
  2. type: "POST",
  3. url: "ajax.php",
  4. data: "Name=摘取天上星&position=IT技術",
  5. success: function(msg){alert(msg);},
  6. error: function(error){alert(error);}
  7. });

JQ serialize()方法取值:

[javascript] view plain copy
  1. $.ajax({
  2. type: "POST",
  3. url:"ajax.php",
  4. data:$(‘#formID‘).serialize(),// 要提交的表單
  5. success: function(msg) {alert(msg);},
  6. error: function(error){alert(error);}
  7. });

serialize()序列化表單實例:

[html] view plain copy
  1. <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
  2. <script type="text/javascript">
  3. $(function(){
  4. $("#button").click(function(){
  5. alert($("#formID").serialize());
  6. });
  7. });
  8. </script>
  9. <form id="formID">
  10. 姓名 <input value="摘取天上星" name="Name" />
  11. 職位 <input value="IT技術" name="position" />
  12. <input id="button" value="提交" type="button" />
  13. </form>

將form中的值轉換為鍵值對:

[javascript] view plain copy
  1. // 如:{Name:‘摘取天上星‘,position:‘IT技術‘}
  2. // ps:註意將同名的放在一個數組裏
  3. function getFormJson(form) {
  4. var o = {};
  5. var a = $(form).serializeArray();
  6. $.each(a, function () {
  7. if (o[this.name] !== undefined) {
  8. if (!o[this.name].push) {
  9. o[this.name] = [o[this.name]];
  10. }
  11. o[this.name].push(this.value || ‘‘);
  12. } else {
  13. o[this.name] = this.value || ‘‘;
  14. }
  15. });
  16. return o;
  17. }

鍵值對方式的AJAX調用:

[javascript] view plain copy
  1. //調試調用
  2. $(function(){
  3. $("#button").click(function(){
  4. alert(getFormJson("#formID"));
  5. });
  6. });
  7. //Ajax提交
  8. $.ajax({
  9. type: "POST",
  10. url:"ajax.php",
  11. data:getFormJson($("#formID")),//表單數據JSON格式的函數參數裏填寫表單的ID或要提交的表單
  12. dataType: ‘json‘,
  13. success: function(msg) {alert(msg);},
  14. error: function(error){alert(error);}
  15. });

實例中通用的HTML表單:

[html] view plain copy
    1. <form id="formID">
    2. 姓名 <input value="摘取天上星" name="Name" />
    3. 職位 <input value="IT技術" name="position" />
    4. <input id="button" value="提交" type="button" />
    5. </form>

jQuery使用serialize(),serializeArray()方法取得表單數據+字符串和對象類型兩種表單提交的方法