(MVC,JS)FormData 的运用

小弟是初新者,第一次写笔记,写不好请见谅也请多指教!

因为公司功能需求有去接触到,想说尝试做个笔记与大家分享讨论^^

功能需求是需要一个Form表单并且把资料传递到后端,但是又想用ajax来发送资料到后端的话

以下:

<HTML>部份 <tr>            <td>PersonId : </td>            <td>                @Html.TextBox("PersonId")            </td>        </tr>        <tr>            <td>Name : </td>            <td>                @Html.TextBox("Name")            </td>        </tr>        <tr>            <td>Gender : </td>            <td>                @Html.DropDownList("Gender",new List<SelectListItem>           {               new SelectListItem{ Text ="Male",Value = "M"},               new SelectListItem{ Text ="Female",Value = "F"}           }, "Please select")            </td>        </tr>        <tr>            <td>City : </td>            <td>                @Html.TextBox("City")            </td>        </tr>        <tr>            <td>                <input type="button" value="送出" id="btnSubmit" />            </td>        </tr>    </table>    -----------------    <JavaScript>部份    $("#btnSubmit").click(function () {            var formData = new FormData();            formData.append("PersonId", $("#PersonId").val());            formData.append("Name", $("#Name").val());            formData.append("Gender", $("#Gender").val());            formData.append("City", $("#City").val());            $.ajax({                url: "/FDTest/Index",                method: "Post",                data: formData,                cache: false,                contentType: false,                processData: false,                success: function (data) {                    alert(data);                }            });        });    ---------------------------        <Controller>部份    [HttpPost]        public list<string> Index(FormCollection formcollection)        {             List<string> list = new List<string>();            for (int i = 0;i<formcollection.Count;i++) {                var b = formcollection[i].ToString();                list.Add(b);            }                                    return list;        }
    简单说明一下,前端用FormData重新去装我需要的资料进去(就像是一个全新的Form表单)    运用FormData.append();(这里有个重点append()第一个参数是name的名称)    再利用ajax传送(这里需要注意一下:    cache: false    contentType: false-->告诉JQuery不要设置ContentType    processData: false-->告诉JQuery不要擅自处理传送的资料,这三个一定要有!)    然后后端用FormCollection类别去接应它    这里我用了一个list去装传过来的四个值,然后下面再去作所需的功能需求...    以上是我的分享!

关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章