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 相关文章推荐
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
js 解决“options为空或不是对象”
Dec 22 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
php中opendir函数用法实例
2014/11/15 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
nodejs教程之入门
2014/11/21 NodeJs
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
JS实现li标签的删除
2019/04/12 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
给Python入门者的一些编程建议
2015/06/15 Python
python 全文检索引擎详解
2017/04/25 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
青年教师个人总结
2015/02/11 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers