데이터를 양식에 캡슐화하고 제출하는 프로세스

아래 편집자는 양식 데이터를 json 형식으로 캡슐화하여 서버에 제출하는 구현 방법을 공유할 것입니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 에디터를 따라가며 함께 살펴볼까요

1.jsp 코드, 형식:

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

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. 위의 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue에서 이전 페이지로 이동하는 방법

Bootstrap 프레임워크에서 treeview를 사용하여 동적으로 데이터를 로드하는 방법

웹사이트 생성 장 디렉토리 코드 예제에 대하여

자세한 소개 Vue 데이터 바인딩

Vue 고급 구성 요소 사용 정보

Koa를 사용하여 Node.js를 통해 프로젝트 빌드

위 내용은 데이터를 양식에 캡슐화하고 제출하는 프로세스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!