ajax jquery submit form -

xinkong1010

浏览: 261027 次
性别:
来自: 长沙

最近访客更多访客>>

adminstarg

raingel520

JevonZhang8

nkym

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

ajax jquery submit form

博客分类：

jquery

Ajax jQuery json Web UI

Form插件，支持Ajax，支持Ajax文件上传，功能强大，基本满足日常应用

插件下载：jquery.form.js

1、Form插件的详细使用方法及应用实例

http://www.malsup.com/jquery/form/

2、form实例：

<!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>
    <script type="text/javascript" language="JavaScript" src="js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" language="JavaScript" src="js/jquery.form.js"></script>
    <script>
     // prepare the form when the DOM is ready
/*$(document).ready(function() {
     // bind form using ajaxForm
     $('#htmlForm').ajaxForm({
         // target identifies the element(s) to update with the server response
         target: '#htmlExampleTarget',

         // success identifies the function to invoke when the server response
         // has been received; here we apply a fade-in effect to the new content
         success: function() {
             $('#htmlExampleTarget').fadeIn('slow');
         }
     });
});
*/

// prepare the form when the DOM is ready
$(document).ready(function() {
     var options = {
         target:         '#htmlExampleTarget',    // target element(s) to be updated with server response
         beforeSubmit:   showRequest,   // pre-submit callback 表单提交前被调用的回调函数
         success:        showResponse   // post-submit callback   表单提交成功后被调用的回调函数

         // other available options:
         //url:        url          // override for form's 'action' attribute
         //type:       type         // 'get' or 'post', override for form's 'method' attribute
         //dataType:   null         // 'xml', 'script', or 'json' (expected server response type)
         //clearForm: true         // clear all form fields after successful submit
         //resetForm: true         // reset the form after successful submit

         // $.ajax options can be used here too, for example:
         //timeout:    3000
     };

     // bind to the form's submit event
     $('#htmlForm').submit(function() {
         // inside event callbacks 'this' is the DOM element so we first
         // wrap it in a jQuery object and then invoke ajaxSubmit
         $(this).ajaxSubmit(options);

         // !!! Important !!!
         // always return false to prevent standard browser submit and page navigation
         return false;
     });
});

// pre-submit callback
function showRequest(formData, jqForm, options) {
     // formData is an array; here we use $.param to convert it to a string to display it
     // but the form plugin does this for you automatically when it submits the data
     var queryString = $.param(formData);

     // jqForm is a jQuery object encapsulating the form element.   To access the
     // DOM element for the form do this:
     // var formElement = jqForm[0];

     alert('About to submit: \n\n' + queryString);

     // here we could return false to prevent the form from being submitted;
     // returning anything other than false will allow the form submit to continue
     return true;
}

// post-submit callback
function showResponse(responseText, statusText)   {
     // for normal html responses, the first argument to the success callback
     // is the XMLHttpRequest object's responseText property

     // if the ajaxSubmit method was passed an Options Object with the dataType
     // property set to 'xml' then the first argument to the success callback
     // is the XMLHttpRequest object's responseXML property

     // if the ajaxSubmit method was passed an Options Object with the dataType
     // property set to 'json' then the first argument to the success callback
     // is the json data object returned by the server

     alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
         '\n\nThe output div should have already been updated with the responseText.');
}

</script>
</head>
<body>
                <form id="htmlForm" autocomplete="on" method="post" action="r.aspx">
                            <TEXTAREA id=MyEnounce name=MyEnounce rows=5 cols=55></TEXTAREA>
                             <div id="htmlExampleTarget"></div>
                <input type="submit" value="注册" />
                </form>

</body>
</html>

提交的页面 r.aspx<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Web.SessionState" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Web" %>
<%@ Import Namespace="System.Web.UI" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Text" %>

<%
     Response.Write(Request.Form["MyEnounce"]);

%>

分享到：

Myeclipse6.0.1设置 | jQuery Form Plugin：AJAX方式提交表单的完 ...

2011-01-08 20:49
浏览 4788
评论(1)
分类:Web前端
查看更多

1 楼 yelang2009 2011-02-16

very good

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ajax jquery submit form

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ajax jquery submit form

评论

发表评论

相关推荐

jQuery Form Plugin：AJAX方式提交表单的完全方案

JSON--Java与AJAX(Jquery)

JQuery配合Ajax、JSON使用

最近访客更多访客>>