Form表单插件jquery.form.js

<!-- 引入jquery文件 -->    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<!-- form表单 -->
    <form id="my_form" action="submit.php" method="post">
    <p>姓名：<input type="text" name="uname" id="uname" class="input"></p>
    <p>性别：<input type="radio" name="sex" value="1" checked> 男 <input type="radio"
    name="sex" value="2"> 女 </p>
    <p>年龄：<input type="text" name="age" id="age" class="input" style="width:50px"></p>
    <p style="margin-left:30px"><input type="submit" class="btn" value="提交">
    <span id="msg"></span></p>
    </form>
    <div id="output"></div> 

1. $(function(){
2. var options = {
3. beforeSubmit: showRequest, //提交前处理
4. success: showResponse, //处理完成
5. resetForm: true,
6. dataType: ‘json‘
7. };
9. $(‘#my_form‘).submit(function() {
10. $(this).ajaxSubmit(options);
11. });
12. });
14. function showRequest(formData, jqForm, options) {
15. var uname = $("#uname").val();
16. if(uname==""){
17. $("#msg").html("姓名不能为空！");
18. return false;
19. }
21. var age = $("#age").val();
22. if(age==""){
23. $("#msg").html("年龄不能为空！");
24. return false;
25. }
26. $("#msg").html("正在提交...");
29. return true;
30. }
32. function showResponse(responseText, statusText) {
33. $("#msg").html(‘提交成功‘);
34. var sex = responseText.sex==1?"男":"女";
35. $("#output").html("姓名："+responseText.uname+" 性别："+sex+" 年龄："+responseText.age);
36. }