form表单数据封装成json格式并提交给服务器的实现方法


Posted in Javascript onDecember 14, 2017

1、jsp代码,form表单:

<form action="#" id="costForm">
<input type="hidden" id="userId" name="userId"/>
<div id="COST">
 <img src='<%=path %>/cvc/center/images/close.png' class="close" style="width:34px;position:absolute;right:0px;top:0px;"></img>
 <h2 style="font-weight: bolder;font-size: 14px;">更改该注册订单的收费状态</h2>
 <ul>
 <li>
  <label for="report">
    是否已报到:
  </label>
  <input type="radio" id="baodao1" name="baodao" value="1"/>是
  <input type="radio" id="baodao0" name="baodao" value="0"/>否
 </li>
 <li>
  <label for="name">
   姓
名:
  </label>
  <span id="costName"></span>
 </li>
 <li>
  <label for="type">
   
注册类型:
  </label>
  <span id="costType"></span>
 </li>
 <li>
  <label for="sure_fee">
    在线支付手续费:
  </label>
  <span id="costType">0</span>
 </li>
 <li>
  <label for="sure_fee">
     应收费金额:
  </label>
  <span id="price"></span>
 </li>
 <li>
  <label for="already_fee">
     已收费金额:
  </label>
  <input type="text" id="pay_" name="pay"/>
 </li>
 <li>
  <label for="owe">
   
欠
款:
  </label>
  <span id="qianPay"></span>
 </li>
 <li>
  <label for="fee_type">
   
付款方式:
  </label>
  <input type="radio" id="payType1" name="payType" value="3"/>银行
  <input type="radio" id="payType2" name="payType" value="4"/>邮局
  <input type="radio" id="payType3" name="payType" value="5"/>现金
  <input type="radio" id="payType4" name="payType" value="2"/>在线支付
 </li>
 <li>
  <label for="fee_evidence">
     是否收到汇款凭证:
  </label>
  <input type="radio" id="isReceiveProof1" name="isReceiveProof" value="1"/>是
  <input type="radio" id="isReceiveProof0" name="isReceiveProof" value="0"/>否
 </li>
 <li>
  <label for="fa_piao">
   
发票抬头:
  </label>
  <span id="billTitle"></span>
 </li>
 
  <li>
  <label for="fa_piao">
   
发票编号:
  </label>
   <input type="text" id="billCode" name="billCode"/>
 </li>
 <li>
  <label for="check_evidence">
   是否已开发票:
  </label>
  <input type="radio" id="isBill1" name="isBill" value="1"/>是
  <input type="radio" id="isBill0" name="isBill" value="0"/>否
 </li>
 <li>
  <label for="get_evidence">
   是否已领发票:
  </label>
  <input type="radio" id="isDrawBill1" name="isDrawBill" value="1"/>是
  <input type="radio" id="isDrawBill0" name="isDrawBill" value="0"/>否
 </li>
 <li>
 
  <label for="date">
   已发确认日期:
  </label>
  <span id="confirmDate"></span>
  <!-- <input type="text" id="confirmDate" name="confirmDate"/> --> 
  <!-- <input id="confirmDate" name="confirmDate" class="text" type="text" onClick="WdatePicker()"/> -->
 </li>
 <li>
  <label for="check_letter">是否已发确认函:</label>
  <span id="isConfirmInvitation"></span>
 </li>
  <li>
  <label for="fa_piao">在线支付状态:</label>
  <span id="payString"></span>
 </li>
 </ul>
 <div class="fee_opr">
  <button type="button" class="fee_sure" style="border: none;background: #003260;color: #ffffff;padding: 3px 30px;margin-left: 10px;border-radius: 0px;">确定</button>
  <button type="button" class="fee_cancel" style="border: none;background: #003260;color: #ffffff;padding: 3px 30px;margin-left: 10px;border-radius: 0px;">关闭</button>
 </div>
</div>
</form>

2、js代码:

$(".fee_sure").click(function () {
  var dataObj = $("#costForm").serialize();
  var payType = $('input[name="payType"]:checked').val();
  if(payType == undefined){
   alert("请选择付款类型");
   return ;
  }else{
   $.ajax({
    url:"/webCenter.do?method=saveUserMessage",
    type: "post", 
    dataType:"json",
    data:dataObj,
    cache:false,
    ifModified:true,
    success:function(json){
      if(json.flag == 1){
       alert("1234");
      }
    }
   })
  }
 })

3、后台action处理:

@RequestMapping(params ="method=saveUserMessage",method=RequestMethod.POST)  //导入发言
     public void saveUserMessage(int userId,HttpServletRequest request,HttpServletResponse response){
      try {
       HttpSession session = this.getSession(request);
       Adminuser adminUser = session.getAttribute("centerAdminUser") == null?null:(Adminuser) session.getAttribute("centerAdminUser");
       if(adminUser == null){
        try {
         response.sendRedirect(request.getContextPath()+"/center/index.jsp");
        } catch (Exception e) {
         e.printStackTrace();
        }
       }else{
        String billNumber = request.getParameter("billCode")==null?"":request.getParameter("billCode");
        String isBaodao = request.getParameter("baodao")==null?"0":request.getParameter("baodao");
        String haspay = request.getParameter("pay")==null?"0":request.getParameter("pay");
        String payType = request.getParameter("payType")==null?"0":request.getParameter("payType");
        String isFkpz = request.getParameter("isReceiveProof")==null?"0":request.getParameter("isReceiveProof");
        String isYkfp = request.getParameter("isBill")==null?"0":request.getParameter("isBill");
        String isYlfp = request.getParameter("isDrawBill")==null?"0":request.getParameter("isDrawBill");
        JSONObject jsonObject = new JSONObject();
        //AdminuserConferences adminuserConferences = webService.getAdminuserConferences(adminUser.getAdminuserId());
        UserInfo userInfo = webService.getUserInfoById(userId);
        if(userInfo!=null)
        {
         jsonObject.accumulate("flag",1);
         ChcRegUser chcRegUser = webService.getChcRegUser(userId);
         if(chcRegUser!=null)
         {
          chcRegUser.setHasPay(Integer.parseInt(haspay));
          chcRegUser.setPayType(Integer.parseInt(payType));
          if(chcRegUser.getHasPay()-chcRegUser.getPay()==0)
          {
           chcRegUser.setStateType(1);
          }
          webService.saveObject(chcRegUser);
          userInfo.setIsBaodao(Integer.parseInt(isBaodao));
          userInfo.setIsFkpz(Integer.parseInt(isFkpz));
          userInfo.setBillNumber(billNumber);
          userInfo.setIsYlfp(Integer.parseInt(isYlfp));
          userInfo.setIsYkfp(Integer.parseInt(isYkfp));
          webService.saveObject(userInfo);
          jsonObject.accumulate("pay", chcRegUser.getPay());
          jsonObject.accumulate("haspay", chcRegUser.getHasPay());
         }
        }else {
         jsonObject.accumulate("flag",0);
        }
        writeJson(response, jsonObject.toString());
       }
      } catch (Exception e) {
       e.printStackTrace();
      }
     }

以上这篇form表单数据封装成json格式并提交给服务器的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
CCPry JS类库 代码
Oct 30 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
js动态设置div的值下例子
Oct 29 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
使用AOP改善javascript代码
May 01 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 #Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 #Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 #jQuery
原生js实现简单的焦点图效果实例
Dec 14 #Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 #Javascript
详解vue-cli 接口代理配置
Dec 13 #Javascript
vue项目总结之文件夹结构配置详解
Dec 13 #Javascript
You might like
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Django实现文件上传下载功能
2019/10/06 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
小班重阳节活动方案
2014/02/08 职场文书
报关专员求职信范文
2014/02/22 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
边城读书笔记
2015/06/29 职场文书
教你部署vue项目到docker
2022/04/05 Vue.js
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android