シミュレーションformコミットフォーム

フォーム構造

シミュレーションformはフォームを提出し、ボタンをクリックするとformのsubmit()イベントを実行し、フォームのNameはインタフェースに必要なパラメータ名であり、フォームvalueはインタフェースに必要なパラメータ値である.

  <form action="" method="post" target="_blank" id="form_export" hidden>
    <input type='text' name="city" id="form-city">
    <input type="text" name="area" id="form-area">
    <input type="text" name="month" id="form-month">
    <input type="text" name="sale_type" id="form-type">
    <input type="text" name="type" value="2">
  form>

コミットするインタフェースデータの処理

複数のモジュールが1つのフォームを共有しているため、パフォーマンスを向上させるため、データの処理とコミットの方法は、すべての「データのエクスポート」ボタンに同じclass名があり、異なるモジュールのclass名をクリックすると、私たちが設定したカスタム属性「data-key」が自動的に取得され、この「data-key」属性はこのボタンがどのモジュールに属しているかを示し、オブジェクトを定義します.すべてのモジュールに必要な異なる属性を定義し、オブジェクトのkeyを「data-key」属性値とし、data-key属性値によってオブジェクトから対応する値を取り、フォームに入力します.

<div class="industry">
  <input class="btn btn-default exportTotal" type="submit" value=" " data-key="nineData">
div>
<div class="type">
  <input class="btn btn-default exportTotal" type="submit" value=" " data-key="sevenData">
div>

```js

var formDatas = {
    threeData: {
      url: '/all/getthree'
    },
    fourData: {
      url: '/all/getfour'
    },
    fiveData: {
      url: '/all/getfive'
    },
    sixData: {
      url: '/all/getsix'
    },
    sevenData: {
      url: '/all/getseven'
    },
    eightData: {
      url: '/all/geteight'
    },
    nineData: {
      url: '/all/getnine'
    }
  }





<div class="se-preview-section-delimiter">div>

//  , , threeData 
  formDatas.threeData.city = param.city
  formDatas.threeData.area = param.area
  formDatas.threeData.month = param.month
  formDatas.threeData.type = param.sale_type

フォームの発行

   //  
   $(".exportTotal").click(function(){
    var myKey = $(this).attr("data-key")
    var exParam = formDatas[myKey]
    setExportData(exParam)
  })

  function setExportData(param){
    $("#form_export").prop('action', param.url)
    $("#form-city").prop('value', param.city)
    $("#form-area").prop('value', JSON.stringify(param.area))
    $("#form-month").prop('value', JSON.stringify(param.month))
    $("#form-type").prop('value', JSON.stringify(param.type))
    $("#form_export").submit()
  }