使用jquery.form.js实现ajax提交表单

jQuery.form.js表单插件，可以让您轻松地在HTML表单中使用AJAX

下载地址： http://malsup.github.com/jquery.form.js

表单插件API

英文原文：http://www.malsup.com/jquery/form/#api

实例：

后台（php后台）：

1 <?php
2     print_r($_FILES);
3     print_r($_POST);

前台：

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width,initial-scale=1">
  6     <script src="jquery-1.11.2.js"></script>
  7     <script src="jquery.form.js"></script>
  8     <title>Document</title>
  9 </head>
 10 <body>
 11     <div class="container">
 12         <div>
 13             <form id="myForm">
 14                 <input type="text" name="name" /><br>
 15                 <input type="password" name="password" /><br>
 16                 <input type="file" name="file"/><br>
 17                 <textarea name="content" rows="3" cols="100">
 18                     
 19                 </textarea><br>
 20                 <input type="radio" name="sexual" checked="checked">male<br>
 21                 <input type="radio" name="sexual">female<br>
 22                 爱好：<br>
 23                 <input class="hobby" type="checkbox" name="hobby[]" value="football">football<br>
 24                 <input class="hobby" type="checkbox" name="hobby[]" value="basketball">basketball<br>
 25                 <input type="submit" value="提交">
 26             </form>
 27         </div>
 28         <div class="row">
 29             <button class="btn btn-default" id="div2" >ajaxSubmit</button>
 30             <button class="btn btn-default" id="div3" >formToArray</button>
 31             <button class="btn btn-default" id="div4" >formSerialize</button>
 32             <button class="btn btn-default" id="div5" >fieldSerialize</button>
 33             <button class="btn btn-default" id="div6" >fieldValue</button>
 34             <button class="btn btn-default" id="div7" >clearForm</button>
 35             <button class="btn btn-default" id="div8" >clearFields</button>
 36             <button class="btn btn-default" id="div9" >resetForm</button>        
 37         </div>
 38     </div>
 39 </body>
 40 </html>
 41 <script>
 42     $(function(){
 43         //ajaxForm，需要通过表单的submit实现
 44         $('#myForm').ajaxForm({
 45             delegation: true,
 46             url: 'upload.php',
 47                 method: 'post',
 48                 success: function(result){
 49                     console.log(result);
 50                 }
 51         });
 52 
 53         //ajaxSubmit
 54         $('#div2').on('click', function(evt){
 55             $('#myForm').ajaxSubmit({
 56                 url: 'upload.php',
 57                 method: 'post',
 58                 success: function(result){
 59                     console.log(result);
 60                 }
 61             });
 62         });
 63 
 64         //formToArray
 65         $('#div3').on('click', function(evt){
 66             console.group('myForm');
 67             console.log($('#myForm').formToArray());
 68             console.groupEnd();
 69         });
 70 
 71         //formSerialize
 72         $('#div4').on('click', function(evt){
 73             console.group('myForm');
 74             console.log($('#myForm').formSerialize());
 75             console.groupEnd();
 76         });
 77 
 78         //fieldSerialize
 79         $('#div5').on('click', function(evt){
 80             console.group('hobby');
 81             console.log($('.hobby').fieldSerialize());
 82             console.groupEnd();
 83         });
 84 
 85         //fieldValue
 86         $('#div6').on('click', function(evt){
 87             alert($('input[name=name]').fieldValue());
 88             console.log($('.hobby').fieldValue());
 89         });
 90 
 91         //clearForm
 92         $('#div7').on('click', function(evt){
 93             $('#myForm').clearForm();
 94         });
 95 
 96         //clearFields
 97         $('#div8').on('click', function(evt){
 98             $('#myForm input[name=sexual]').clearFields();
 99         });
100 
101         //resetForm
102         $('#div9').on('click', function(evt){
103             $('#myForm').resetForm();
104         });
105     });
106 </script>

 

posted @ 2015-05-08 00:15  phpnaruto  阅读(175)  评论(0)    收藏  举报