在MVC环境中,AJAX方式添加一个对象,这个对象在Models中是一个视图模型,在前台显示时是这样的代码:

<%using (Html.BeginForm())
      { %>
    姓名:<%=Html.TextBoxFor(model=>model.UserName) %>
    Email:<%=Html.TextBoxFor(model=>model.Email) %>
    年龄:<%=Html.TextBoxFor(model=>model.Age) %>
    <input type="button" id="btn" value="提 交" />
    <%} %>

当单击提交按钮时,使表单中的数据提交到controller中指定的action中,代码如下:

<script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                $.ajax({
                    type: "POST",
                    url: "/Home/Create",
                    data: $("form").serialize(),
                    success: function (data) {
                        if (data.success == true)
                            alert("成功,用户为("+data.name+")");
                        else
                            alert("失败");
                    }
                });
            });
        });
    </script>

在上面代码中,使用了JS的序列化serialize(),它把一组输入元素序列化为数据字符串,它们与实体名一一对应

在controller中,会通过一个实体参数接收这个序列化的字符串

[HttpPost]
        public ActionResult Create(CreateUserModels entity)
        {

return Json(new { success = true,name=entity.UserName });
        }

OK,不敢相信吧,它居然是可以得到我们前台传过来的数据的,呵呵.

本文转自博客园张占岭(仓储大叔)的博客,原文链接:VIEW层AJAX提交表单到Controller的实体(AJAX传递序列化的输入元素),如需转载请自行联系原博主。

VIEW层AJAX提交表单到Controller的实体(AJAX传递序列化的输入元素)相关推荐

  1. 用ajax提交表单给数据库,如何利用ajax提交form表单到数据库

    如何利用ajax提交form表单到数据库 发布时间:2021-06-17 14:52:49 来源:亿速云 阅读:75 作者:小新 这篇文章主要介绍如何利用ajax提交form表单到数据库,文中介绍的非 ...

  2. jQuery的ajax提交表单

    jQuery的ajax提交表单 1.表单 <form id="ff" method="post"><div class="input ...

  3. ajax提交表单序列化(serialize())数据

    知识点: $("#form").serialize();将表单数据序列化为标准URL编码文本字符串(key1=value1&key2=value2-). 以下用一个例子来演 ...

  4. php ajax弹出框传值,PHP_Yii2.0 模态弹出框+ajax提交表单,如题 我们使用模态弹出框+ajax - phpStudy...

    Yii2.0 模态弹出框+ajax提交表单 如题 我们使用模态弹出框+ajax提交表单 首先我们把index视图的create按钮添加data-toggle 和 data-target. 代码如下: ...

  5. java jquery提交表单_Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  6. Yii2.0 模态弹出框+ajax提交表单

    如题 我们使用模态弹出框+ajax提交表单 首先我们把index视图的create按钮添加data-toggle 和 data-target. 代码如下: <?php echo Html::a( ...

  7. html ajax提交表单实例,Ajax提交表单并接收json实例代码

    需求: 实现点击按钮后,数据以表单形式提交至服务器,并接收来自服务器的返回数据.过程中页面不刷新. html代码 xingming: nianling: ajax提交 js代码 function my ...

  8. ajax提交后立刻刷新,Ajax提交表单页面刷新很快的解决方法

    注:使用ajax 提交表单时 type类型最好不用submit 用button合适 function formCheck(){ $.ajax({ type: "post", url ...

  9. Jquery ajax提交表单几种方法详解

    [导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

最新文章

  1. MFC获取文字高宽设置字符间隔
  2. 宝塔同时安装苹果cms海洋cms_★苹果cms常见问题有哪些?100个常见问题的解决方法...
  3. C#中的深复制和浅复制(在C#中克隆对象)
  4. How to change in the Cocos2d-x project from landscape to portrait both in iOS and Android
  5. 用css3制作旋转加载动画的几种方法
  6. Serverless.com CEO首次访华!探讨无服务器技术落地
  7. windows下安装gevent
  8. 20145308刘昊阳 《Java程序设计》实验五报告
  9. 用stack处理中缀表达式【+、-、*、/、()】
  10. 1.13编程基础之综合应用_30_1的个数
  11. shopxo二次开发:底部导航VS顶部导航 (统一性问题)
  12. 人类究竟需要什么样的微积分原理
  13. 密码学系列——NTHASH以及MD4算法
  14. 吉林省辽源市谷歌高清卫星地图下载
  15. HTTP请求过程——Chrome浏览器Network详解
  16. data uploads php权限,【网站安全】取消data、uploads等有执行.php的权限
  17. 上传照片(身份证照片正反面)
  18. python如何做成app?
  19. css里面的after_css after是什么?
  20. 杜国光博士,基于视觉的机器人抓取--物体定位,位姿估计到抓取估计课堂笔记

热门文章

  1. 不是我吹,这个idea插件你真没用过!
  2. 干掉ArrayList:HikariCP为什么自己造了一个FastList?
  3. 跟我学Springboot开发后端管理系统2:Mybatis-Plus实战
  4. 前后端分离接口规范~
  5. 年薪 50w,这门编程语言该怎么学?
  6. GTA 5 + AI = ?
  7. 来个例子,彻底弄懂什么是 EM 算法
  8. 胜者为王(比较字符串)
  9. 主要元素(超过一半元素)
  10. Numpy的介绍和优势