Ajax表单提交

最新推荐文章于 2022-12-18 15:04:25 发布

1024节

最新推荐文章于 2022-12-18 15:04:25 发布

阅读量89

点赞数

分类专栏： MVC

本文链接：https://blog.csdn.net/m0_56945138/article/details/119479148

版权

Ajax 表单提交文件上传 jQuery FormData

关键词由CSDN通过智能技术生成

MVC 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Ajax表单提交

1.post
2.Ajax

1.post

1.服务器端代码:

[HttpGet]
public ActionResult UserP()
{
    return View();
}
[HttpPost]
public ActionResult UserP(string UserName,string UserPwd)
{
    return Content("用户名" + UserName + "密码" + UserPwd);
}

2.客户端表单代码:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>UserP</title>
</head>
<body>
<form id="fmUserP">
    用户名:<input type="text" name="UserName" id="Name" />
    <br />
    密  码:<input type="text" name="UserPwd" id="Pwd" />
    <br />
    <input type="button" value="保存" id="BtnSave" onclick="saveUser()" />
</form>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script>
    function saveUser() {
        var fd = $("#fmUserP").serialize();
        $.post("/Home/UserP", fd, function (res) {
            alert(res);
        },'text');
    }
</script>
</body>
</html>

2.Ajax

1.服务器端代码:

public ActionResult CreateUser()
{
    return View();
}
[HttpPost]
public ActionResult CreateUser(string un, HttpPostedFileBase up)
{
   var fileName = Path.Combine(Request.MapPath("~/Content"), Path.GetFileName(up.FileName));
   try
   {
       up.SaveAs(fileName);
       String d = String.Format("用户【{0}】的照片已经保存成功", un);
       return Json(new
       {
           success = true,
           message = d,
           remark = "/Content/" + Path.GetFileName(up.FileName)
       });
   }
   catch (Exception ex)
   {
       return Json(new { success = false, message = ex.Message, remark = "" });
   }
}

2.客户端表单代码:

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>CreateUser</title>
</head>
<body>
<form id="fmCreateUser">
    姓名:<input type="text" name="un" id="txtUn" />
    <br />
    照片:<input type="file" name="up" id="txtUp" />
    <br />
    <input type="button" value="保存" id="BtnSave" onclick="saveUser()" />
</form>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script>
function saveUser() {
    //写法1
        var fd = new FormData();
        fd.append("un", $("#txtUn").val());
        fd.append("up", $("#txtUp")[0].files[0]);
    //方法2
    //var fd = new FormData(document.getElementById("fmCreateUser"));
    $.ajax({
        url: "/Home/CreateUser",
        type: "POST",
        data: fd,
        success: function (data, textStatus) {
            alert(data.message);
            console.log(data);
        },
        processData: false,//不处理数据
        contentType: false //不设置内容类型
    });
}
</script>
</body>
</html>

1024节

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax表单提交

Ajax表单提交1.post2.Ajax1.post1.服务器端代码:[HttpGet]public ActionResult UserP(){ return View();}[HttpPost]public ActionResult UserP(string UserName,string UserPwd){ return Content("用户名" + UserName + "密码" + UserPwd);}2.客户端表单代码:@{ Layout = n
复制链接

扫一扫