2020年8月31日 星期一

ajax 使用form格式post 資料

Html部分:
	

  <form id="myForm" action="getPost.php" class='col-12 col-md-5 mx-auto'>
    <div class="form-group">
      <label for="data1">Email:</label>
      <input type="email" class="form-control" id="data1" name="data1" aria-describedby="emailHelp" autocomplete required>
      <small id="emailHelp" class="form-text text-muted">請輸入E-mail</small>
    </div>
    <div class="form-group">
      <label for="data2">Password</label>
      <input type="password" class="form-control" id="data2" name="data2" autocomplete required>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>



Jquery 部分:

$(function(){

      $( "#myForm" ).on( "submit", function(event) {

        event.preventDefault();        
        var form = $(this);
        var url = form.attr('action');

        $.ajax({
          type: "POST",
          url: url,
          data: form.serialize(), // 把form內的物件序列化.
          success: function(data)
          {
            //alert(data);

            if(data==1){
              alert('成功');
              //window.location.href='index.php';
            }else if(data == 0){
              alert('失敗');
              return false; 
            };

          }
        });       
      });

})

接收的PHP這一端,就直接以$_POST[""]接收傳過來的各個值

相關:不使用form的方式,直接用id或class讀取input的vlaue值post

沒有留言: