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 EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
详解vue-router导航守卫
Jan 19 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
简谈创建React Component的几种方式
Jun 15 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的cURL库简介及使用示例
2015/02/06 PHP
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
JavaScript知识点整理
2015/12/09 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
深入探究node之Transform
2017/07/20 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
python读取与处理netcdf数据方式
2020/02/14 Python
python爬虫基础知识点整理
2020/06/02 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
财务负责人任命书
2014/06/06 职场文书
代办委托书怎么写
2014/08/01 职场文书
师范生见习报告
2014/10/31 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js