前后台传值方式

自己写的代码太少,有时候前后台传值还写的不是很熟练,现在总结一下,加深下印象。

1.jquery的Ajax传值

----》前台到后台

期望功能:把前台用户输入的信息保存在数据库里。

前台jsp代码:

function saveUserInfo(){

  var params = {};//定义一个数组


  var userNO = jq("#userNO").val();//把前台页面上的值都赋予一个变量

  var userName = jq("#userName").val();

  var phoneNumber = jq("#phoneNumber").val();

  params["userNO"] = userNO ;//把这些变量都存在这个数组里

  params["userName"] = userName;

  params["phoneNumber"] = phoneNumber;

  jq.ajax({

        type : "post",

        url : "<%=basePath%>personalSetting/personalSettingSaveAll.do",//找到action里相应的方法

        data : params, //把数组的值赋给data,把上面的param改为data,这里就能直接去掉

        dataType : "text",//根据数据类型选择text、jason等

        success : function(data) { 

          alert(msg); //msg可以在后台Action配置,也可以在这里直接写提示信息

        },

        error : function(data) {

          alert("msg");

        }

       });

        } 

 }

后台Action代码:

@SuppressWarnings({ "unchecked", "unused", "rawtypes" })

@RequestMapping(value = "/personalSetting/personalSettingSaveAll.do", method = RequestMethod.POST)

public void saveAll(ModelMap model, HttpServletRequest request, HttpServletResponse response) throws Exception {

    response.setCharacterEncoding("UTF-8");

    HttpSession session = request.getSession();

    String userNO  = request.getParameter("userNO")+"";

    String userName = request.getParameter("userName")+"";

    String phoneNumber = request.getParameter("phoneNumber")+"";     

    PersonalSettingEntity pSE = new PersonalSettingEntity(); 

    if(!("".equals(userNO))||"".equals(userName )||"".equals(phoneNumber ))){ //如果都不为空  

        pSE.setUserNO(userNO);

        pSE.setUserName(userName);

        pSE.setPhoneNumber(phoneNumber);

        PersonSettingService.saveProcessSetting(pSE);

        msg = "保存成功";

    }else{

        msg = "填写不完整"; //可以在前台校验,这里为了举例子

    }

        response.getWriter().print(msg); //这里的msg是text数据,所以前台数据类型是text。

}

 

----》后台到前台

期望功能:把数据库里的用户信息显示到前台页面。

后台Action代码:

@SuppressWarnings({ "unchecked", "unused", "rawtypes" })

@RequestMapping(value = "/personalSetting/personalSettingInitAll.do", method = RequestMethod.POST)

public void qureyAll(ModelMap model, HttpServletRequest request, HttpServletResponse response) throws Exception {

    response.setCharacterEncoding("UTF-8");

    HttpSession session = request.getSession();

    String userId = request.getSession().getAttribute("currentUserId").toString();

    PersonalSettingEntity pSE = PersonSettingService.getPersonalSetting(Long.valueOf(userId));    

    response.getWriter().print(JSONArray.fromObject(pSE).toString());

}

 

前台jsp代码:

function get(){ 

  jq.ajax({

         type : "post",

         url : "<%=basePath%>personalSetting/personalSettingInitAll.do",

         dataType : "json",

         success :function (data) {

          var bean;

          jq.each(data,function(index){

          bean = data[index];

          jq("#userNO").attr("value",bean.userNO);

          jq("#userName").attr("value",bean.userName); 

          jq("#phoneNumber").attr("value",bean.phoneNumber);

           }                  

         },

         error :function (data){

            alert("系统出错!");

         }

   });  

 } 

您好,关于 layui 数据表格的请求传参,一般可以通过以下两种方式实现: 1. 在端页面的 JS 代码中,使用 Ajax 请求获取数据,并将请求参数作为数据传递到后台接口,后台接口根据参数进行数据查询和处理,并返回结果给端页面进行显示。 2. 在 layui 数据表格的配置项中,配置接口 URL 和请求参数,当数据表格需要获取数据时,会自动向后台接口发送请求,并将请求参数作为参数传递到后台接口,后台接口根据参数进行数据查询和处理,并返回结果给 layui 数据表格进行显示。 对于第一种方式,可以参考以下代码: ```javascript // 端 JS 代码 layui.use('table', function(){ var table = layui.table; // 监听搜索按钮的点击事件 $('#searchBtn').click(function(){ // 获取搜索框的值 var keyword = $('#keyword').val(); // 发送 Ajax 请求获取数据 $.ajax({ url: '/api/tableData', type: 'GET', data: { keyword: keyword }, success: function(res){ // 将数据绑定到 layui 数据表格中 table.render({ elem: '#data-table', data: res.data // 其他配置项 }); } }); }); }); // 后台接口代码 app.get('/api/tableData', function(req, res){ // 获取请求参数 var keyword = req.query.keyword; // 根据参数查询数据 var data = getDataByKeyword(keyword); // 返回数据给端页面 res.json({ code: 0, msg: '', data: data }); }); ``` 对于第二种方式,可以参考以下代码: ```javascript // 端 JS 代码 layui.use('table', function(){ var table = layui.table; // 渲染 layui 数据表格 table.render({ elem: '#data-table', url: '/api/tableData', where: { keyword: '' } // 其他配置项 }); // 监听搜索按钮的点击事件 $('#searchBtn').click(function(){ // 获取搜索框的值 var keyword = $('#keyword').val(); // 设置请求参数 table.reload('data-table', { where: { keyword: keyword } }); }); }); // 后台接口代码 app.get('/api/tableData', function(req, res){ // 获取请求参数 var keyword = req.query.keyword; // 根据参数查询数据 var data = getDataByKeyword(keyword); // 返回数据给 layui 数据表格 res.json({ code: 0, msg: '', count: data.length, data: data }); }); ``` 以上代码仅供参考,具体实现方式可以根据项目需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值