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 相关文章推荐
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
vue2.0实现列表数据增加和删除
Jun 17 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读取PDF内容配合Xpdf的使用
2012/11/24 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
PHP getName()函数讲解
2019/02/03 PHP
常用的javascript function代码
2008/05/23 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
python实现矩阵乘法的方法
2015/06/28 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
python中的global关键字的使用方法
2019/08/20 Python
python装饰器的特性原理详解
2019/12/25 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
打架检讨书400字
2014/01/17 职场文书
《月迹》教学反思
2014/02/19 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
音乐课外活动总结
2015/05/09 职场文书
实习证明模板
2015/06/16 职场文书
养成教育主题班会
2015/08/13 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android