专注Java教育14年 全国咨询/投诉热线:444-1124-454
赢咖4LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 Ajax模拟form表单提交的方法

Ajax模拟form表单提交的方法

更新时间:2022-12-06 10:46:24 来源:赢咖4 浏览758次

大家在学习AJAX教程的时候会学到提交表单,Ajax提交表单、使用FormData提交表单数据和上传的文件,有时候前台的数据提交到后台,不想使用form表单上传,希望通过Ajax上传,那么怎么实现呢?

前台页面:

<div>
  <table id="outputInfo">
    <tr><td>Client</td><td><input id='ClientName' type='text'></td></tr>
    <tr><td>CropID</td><td><input id='CropID' type='text' /></td></tr>
    <tr><td>Secret</td><td><input id='Secret' type='text'/></td></tr>
    <tr><td>AppID</td><td><input id='AppID' type='text'/></td></tr>
    <tr><td>Logo</td><td><input id='Logo' type='file'/></td></tr>
  </table>
</div>
<button id="saveInfo">Save</button>

JS代码:

$("#saveInfo").click(function () {
                        var clientName = $("#ClientName").val();
                        var CropID = $("#CropID").val();
                        var Secret = $("#Secret").val();
                        var AppID = $("#AppID").val();
                        var formData = new FormData();
                        alert(clientName);
                        formData.append("file", document.getElementById("Logo").files[0]);
                        formData.append("clientName", clientName);
                        formData.append("CropID", CropID);
                        formData.append("Secret", Secret);
                        formData.append("AppID", AppID);
                        $.ajax({
                            url: "上传地址",
                            data: formData,
                            type: "POST",
                            contentType: false,//这里
                            processData: false,//这两个一定设置为false
                            success: function (info) {
                                if (info == "success") {
                                      alert("成功上传");
                                } else {
                                    alert(info);
                                }
                            }
                        });
                    });

那么在后台接收使用

HttpRequest request = HttpContext.Current.Request;
//获取到前台的ClientName
string ClientName = request.Params["clientName"];
//获取前台的CropID
string CropID = request.Params["CropID"];
//获取前台的Secret
string Secret = request.Params["Secret"];
//获取前台的AppID
string APPID = request.Params["AppID"];
//获取前台上传的文件
if (request.Files.Count > ){
HttpPostedFile file = request.Files[];
}

这个功能的实现可以实现如:一个页面注册时上传用户图像等情形,当然是用Form表单也可以实现。如果大家对此比较感兴趣,可以关注一下本站的AJAX提交form表单方法,里面有更详细的介绍。

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>