Maison > interface Web > js tutoriel > le corps du texte

Le processus d'encapsulation et de soumission des données dans un formulaire

亚连
Libérer: 2018-06-20 17:29:08
original
2846 Les gens l'ont consulté

L'éditeur suivant partagera avec vous une méthode d'implémentation pour encapsuler les données d'un formulaire au format json et les soumettre au serveur. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde. Suivons l'éditeur pour y jeter un œil.

1. code jsp, formulaire :

<form action="#" id="costForm">
<input type="hidden" id="userId" name="userId"/>
<p id="COST">
 <img src=&#39;<%=path %>/cvc/center/images/close.png&#39; 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>
 <p 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>
 </p>
</p>
</form>
Copier après la connexion

2, code js :

$(".fee_sure").click(function () {
  var dataObj = $("#costForm").serialize();
  var payType = $(&#39;input[name="payType"]:checked&#39;).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");
      }
    }
   })
  }
 })
Copier après la connexion

3. Traitement des actions en arrière-plan :

@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();
      }
     }
Copier après la connexion

Ce qui précède est ce que j'ai compilé Pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment accéder à la page précédente dans vue

Comment implémenter le chargement dynamique à l'aide de l'arborescence dans le framework Bootstrap Données

À propos de l'exemple de code de répertoire du chapitre de génération de sites Web

Introduction détaillée à la liaison de données Vue

Concernant l'utilisation des composants de haut niveau Vue

Utiliser Koa pour construire des projets via Node.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal