夏日博客

A-A+

jQuery实现Ajax提交form表单的程序

2016年01月09日 前端设计 暂无评论 阅读 6 views 次

Ajax提交form表单其实是非常的简单了，我们只要绑定触发事件就可以在用户点击时实现ajax提交表单了，下面一起来看一段jQuery实现Ajax提交form表单的程序

介绍:介绍了如何将一个普通的form表单，迅速改造成通过ajax方式提交，并将结果显示在对话框中。

正文:

我们有一个非常普通的表单：

  1. <form id="form1" name="form1" method="get" action="post.html">  
  2. 标题<input id="testtitle" name="testtitle" type="text" size="40" />  
  3. <input type="submit" value="提交">  
  4. </form>  

为了演示方便，method使用了get，可以根据需要改为post,现在我们把它改造成AJAX方式提交，方法很简单，只需要将下面的代码复制到页面中：

  1. <link type="text/css" href="jquery-ui.css" rel="stylesheet" />  
  2. <style>  
  3. #loading{background-image:url(images/loading.gif);background-position:0px 0px;background-repeat:no-repeat; position:absolute;width:50px;height:50px;top:60%;left:50%;margin-left:-25px;text-align:center;}  
  4. </style>  
  5. <script type ="text/javascript" src="jquery.js"></script>  
  6. <script type ="text/javascript" src="jquery.form.js"></script>  
  7. <script type="text/javascript" src="jquery-ui.js"></script>  
  8. <script type="text/javascript">  
  9. $(function () {  
  10.     bindSubmit();  
  11.     $("#loading").hide();  
  12.     $("#msgdlg").hide();  
  13. });  
  14. function bindSubmit() {  
  15.     var options = {  
  16.             target: '#msgdlg',  
  17.             success: showResponse,  
  18.             error: showError  
  19.             // 其它可选参数:   
  20.             //url:       url         // override for form's 'action' attribute   
  21.             //type:      type        // 'get' or 'post', override for form's 'method' attribute   
  22.             //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)   
  23.             //clearForm: true        // clear all form fields after successful submit  
  24.             //resetForm: true        // reset the form after successful submit  
  25.             // $.ajax 选项,例如超时:   
  26.             //timeout:   3000   
  27.         };  
  28.         $('#form1').submit(function () {  
  29.             $(this).ajaxSubmit(options);  
  30.    $("#loading").show();  
  31.             return false;  
  32.         });  
  33. }  
  34. // 成功响应的回调函数  
  35. function showResponse(responseText, statusText, xhr, $form) {  
  36.     $("#loading").hide();  
  37.  messagebox(responseText);  
  38. }  
  39. // 响应失败  
  40. function showError(xhr, ajaxOptions, thrownError) {  
  41.     $("#loading").hide();  
  42.  messagebox("出错了!" + thrownError);  
  43. }  
  44. // 显示结果信息的对话框  
  45. function messagebox(msg) {  
  46.     $("#msgdlg").html(msg);  
  47.     $("#dialog:ui-dialog").dialog("destroy");  
  48.     $("#msgdlg").dialog({  
  49.             modal: true,  
  50.             width: 380,  
  51.             height: 230,  
  52.             buttons: {  
  53.                 确认: function () {  
  54.                     $(this).dialog("close");  
  55.                 }  
  56.             }  
  57.     });  
  58. }  
  59. </script>  
  60. <div id="msgdlg" title="消息"></div>  
  61. <div id="loading" style="display:none" ondblclick="this.style.display='none'"></div>  

代码中关键的几点：

(1)$('#form1').submit()对Form的Submit的绑定 (使用了jquery.form.js)

(2)定义的showResponse函数处理返回信息。

(3)$("#msgdlg").dialog()创建对话框并显示结果 (使用了jquery-ui.js)

标签：

给我留言