layui前端框架下，jquery的ajax提交表单数据到springmvc控制层的参数配置

最新推荐文章于 2025-07-05 10:11:32 发布

小小鱼34309335

最新推荐文章于 2025-07-05 10:11:32 发布

阅读量1.3w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端layui 文章标签： laui jquery ajax form表单提交 springmvc后端控制层方法参数

本文链接：https://blog.youkuaiyun.com/qq_34309663/article/details/80038037

前端layui 专栏收录该内容

14 篇文章

订阅专栏

本文介绍使用layui前端框架实现表单提交的过程，包括前端表单设计、数据提交及后端接收处理。通过具体代码示例展示了如何配置前端与后端交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近一段时间开始自学layui前端框架下，表单提交数据到后端的方法。前端采用h5，layui,jquery，后端采用ssm框架，现在直接上代码

前端表单页面代码（核心部分）：

<body>
  <section class="layui-larry-box">
    <div class="larry-personal">
      <header class="larry-personal-tit">
        <span>请输入用户信息</span>
      </header><!-- /header -->
      <div class="larry-personal-body clearfix">
        <form class="layui-form col-lg-5">
          <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
              <input type="text" name="client_name" id="client_name" autocomplete="off"  class="layui-input" placeholder="请输入客户姓名">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-block">
              <input type="text" name="client_phone" id="client_phone" autocomplete="off" class="layui-input" placeholder="请输入手机号码">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">推荐人</label>
            <div class="layui-input-block">
              <input type="text" name="client_referr" id="client_referr" autocomplete="off" class="layui-input" placeholder="请输入推荐人姓名">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">发货地址</label>
            <div class="layui-input-block">
              <input type="text" name="client_address" id="client_address" autocomplete="off" class="layui-input" placeholder="请输入发货地址">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">添加日期</label>
            <div class="layui-input-block">
              <input class="layui-input" name="client_time" id="client_time"  placeholder="请选择添加客户的日期">
            </div>
          </div>
          <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">信息备注</label>
            <div class="layui-input-block">
              <textarea name="client_mark" id="client_mark" placeholder="备注(非必填项)" class="layui-textarea"></textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="addClientSub">添加</button>
              <button type="reset" id="res" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
        </form>
        </div>
      </div>
    </section>
<script type="text/javascript">
      layui.use(['form','layer','laydate'], function() {
      var form = layui.form,
          $ = layui.jquery,
          laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
          elem: '#client_time' //指定元素
        });

        //监听form表单提交事件
      form.on('submit(addClientSub)', function(data){
        var param=data.field;//定义临时变量获取表单提交过来的数据，非json格式
        console.log(JSON.stringify(param));//测试是否获取到表单数据，调试模式下在页面控制台查看
        $.ajax({
          url:"client/add",
          type:'post',//method请求方式，get或者post
          dataType:'json',//预期服务器返回的数据类型
          data:JSON.stringify(param),//表格数据序列化
          contentType: "application/json; charset=utf-8",
          success:function(res){//res为相应体,function为回调函数
            if(res.status==200){
              layer.alert('添加客户信息成功',{icon:1});
              //$("#res").click();//调用重置按钮将表单数据清空
            }else{
              layer.alert(data.msg,{icon: 5});
            }
          },
          error:function(){
            layer.alert('操作失败！！！',{icon:5});
          }
        });
        //return false;
      });//end form
});//end layui.use

    </script>
  </body>
</html>

@RequestMapping(value="/add",method = RequestMethod.POST)
@ResponseBody
public Result addClient(@RequestBody Client client){//方法参数必须可以获取到表单数据
    System.out.println("从前端ajax传过来的数据1为***************"+client.getClient_name());
    System.out.println("从前端ajax传过来的数据2为***************"+client.getClient_phone());