Der Prozess der Kapselung und Übermittlung von Daten in einem Formular

Der folgende Editor wird Ihnen eine Implementierungsmethode zum Kapseln von Formulardaten im JSON-Format und deren Übermittlung an den Server vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist. Folgen wir dem Editor und schauen wir uns

1 an. js-Code:

<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>

3. Hintergrundaktionsverarbeitung:

$(".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");
      }
    }
   })
  }
 })

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird. Verwandte Artikel:

So springen Sie in Vue zur vorherigen Seite

So implementieren Sie dynamisches Laden mithilfe der Baumansicht im Bootstrap-Framework Daten

Über das Codebeispiel für ein Kapitelverzeichnis zur Website-Generierung

Detaillierte Einführung in die Vue-Datenbindung

Über die Verwendung von Vue-High-Level-Komponenten

Verwendung von Koa zum Erstellen von Projekten über Node.js

Das obige ist der detaillierte Inhalt vonDer Prozess der Kapselung und Übermittlung von Daten in einem Formular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!