利用jquery form 实现ajax 提交form表单

1.引用jquery主文件和jquery.form.js

<script src="http://www.cnblogs.com/Scripts/jquery-1.4.4.js" ></script>
<script src="http://www.cnblogs.com/Scripts/jquery.form.js" ></script>

2.提交表单代码：

  /********************************************************
******功能描述:form input and file ajax submit (需要jquery.js ,jquery.form.js 顺序不能调整)
******作者：lin.su
******参数描述：targetDiv(成功或者错误显示的div的Id 这个必须在调用的页面存在)
******参数描述：authenMethod(提交form 之前调用的验证（这个需要开发者实现需要验证字段） )
******参数描述：successMothod(提交form 之后需要刷新数据方法 )
******参数描述：urlForm(提交form 的url （action 提交目标） )
******参数描述：formControlId(提交form 的id 这个必须 )
******时间：2012年7月30日
******示例：submitajax_jquery_from("outdiv",VaildMothod,"/Home/Upload","MyForm")
********************************************************/
function submitajax_jquery_from(targetDiv, authenMethod, successMothod,urlForm, formControlId) {
    var options = {
        target: "#" + targetDiv,               // target element(s) to be updated with server response     
        beforeSubmit: authenMethod,      // pre-submit callback      
        success: successMothod,                            // post-submit callback    
        // other available options:        
        url: urlForm,             // override for form's 'action' attribute     
        type: 'post',             // '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:
        error: function (responseText, statusText) {   alert('status: ' + statusText + '\n\nresponseText: \n' + responseText );  },
        timeout: 300000
    };
    $('#' + formControlId).ajaxForm(options);
}
3.页面代码和后台代码
 <form name="frmestprice2" id="frmestprice2"  method="post" enctype="multipart/form-data">
    <table  >
    <tr>
    </tr>
        <tr>
            <td style=" 25%;">
                <%=Res.CulInfo.SurveyChannels %>
            </td>
            <td  style="70%; height:35px;">
                <select id="ddlchanne" name="ddlSurveychannel" " class="easyui-combobox" 

                     panelheight="auto"
                    editable="false" style="120px;">
                    <option  value="" selected="selected">---</option>
                    <option value="现场调查"  ><%=Res.CulInfo.FieldInvestigation %></option>
                    <option value="口头咨询"><%=Res.CulInfo.OralAdvice %></option>
                    <option value="数据分析"><%=Res.CulInfo.DataAnalysis %></option>
                    <option value="其它"  ><%=Res.CulInfo.Others %></option>
                </select>
            </td>
        </tr>
        <tr>
            <td style=" height:30px;">
                <%=Res.CulInfo.Price %>
            </td>
            <td>
                <input type="text" maxlength="30" id="txtPrice" name="txtPrice" style="98%" />
            </td>
        </tr>
        <tr>
            <td style=" height:30px;">
                <%=Res.CulInfo.Investigators %>
            </td>
            <td>
                <input type="text" id="txtInquirer" maxlength="20" name="txtInquirer" style="98%" />
            </td>
        </tr>
        <tr>
            <td style=" height:30px;">
                <%=Res.CulInfo.Details %>
            </td>
            <td>
                <textarea id="txtDetail" name="txtDetail" rows="4" style=" 97%"></textarea>

            </td>
        </tr>
        <tr>
            <td style=" height:30px;">
                <%=Res.CulInfo.Date %>
            </td>
            <td>
                <input type="text" class="txtTime" id="txtCreateDate" name="txtCreateDate"      onclick="WdatePicker({lang: lan,dateFmt:DateFormat})" />
            </td>
        </tr>
        <tr>
            <td style=" height:30px;">
                <%=Res.CulInfo.UploadFile %>
            </td>
            <td>
            <a href=""  id="filenamehref" target="_blank"><span id="filename"></span></a>
                <input type="file" name="file" id="esprice_file" style="98%" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="<%=Res.CulInfo.Add %>" id="esprice_submit" onclick="add_est_price_add()"/>
                    
            </td>
            <td>
            <label  id="est_price_error_msg" ></label>
            </td>
        </tr>
    </table>
    </form>

     public void SavePorpertyPrice(HttpPostedFileBase file)
        {
           
            if (Request.Files[0].ContentLength > 0)
            {
                string[] filenameStr = file.FileName.Split('\\');
                string fileName = filenameStr[filenameStr.Length - 1];
                string[] suffixNameStr = fileName.Split('.');
                string suffixName = suffixNameStr[suffixNameStr.Length - 1];

                string esp_id = Request.Form["esp_id"] == null ? "" : Request.Form["esp_id"].ToString();
                string est_id = Request.Form["est_id"].ToString();
                string inf_soucre = Request.Form["ddlSurveychannel"].ToString();
                string modify_date = Request.Form["txtCreateDate"].ToString();
                string price = Request.Form["txtPrice"].ToString();
                string detail = Request.Form["txtDetail"].ToString();
                string inspector = Request.Form["txtInquirer"].ToString();
                Random rd = new Random();
                string filename = DateTime.Now.ToString("yyyyMMdd") + rd.Next(100) + fileName;
                string path = Server.MapPath("~/" + ConfigurationManager.AppSettings["EstPrice"].ToString() +  "/" + filename);
                file.SaveAs(path);
                string errormsg = verbal.SavePorpertyPrice(esp_id, est_id, inf_soucre, price, detail, inspector, filename, suffixName, modify_date);
               
            }
        }

如果想了解关于jquery.from.js  <a>http://www.malsup.com/jquery/form/#api</a>