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 相关文章推荐
菜单效果
Oct 14 Javascript
JS 建立对象的方法
Apr 21 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
vue强制刷新组件的方法示例
Feb 28 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
vue与iframe之间的信息交互的实现
Apr 08 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获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
js验证模型自我实现的具体方法
2013/06/21 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
jquery实现图片上传前本地预览
2017/04/28 jQuery
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
python实现清屏的方法
2015/04/30 Python
python使用KNN算法识别手写数字
2019/04/25 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
linux面试相关问题
2013/04/28 面试题
高级销售员求职信
2013/10/25 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
高一学生期末评语
2014/04/25 职场文书
大学开学计划书
2014/04/30 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
导游词之昭君岛
2020/01/17 职场文书
python小程序之飘落的银杏
2021/04/17 Python
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers