ajax 使用form格式post 資料

Html部分：

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

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

希望網頁頁面限制在一個瀏覽器內只能在一個分頁中被開啟時 Storage Event 在safari上的Bug

在實作希望網頁頁面限制在一個瀏覽器內只能在一個分頁中被開啟時使用了以下的方法（參考自此）

		
// Broadcast that you're opening a page.
  localStorage.openpages = Date.now();
  var onLocalStorageEvent = function(e){
  
      if(e.key == "openpages"){
          // Listen if anybody else is opening the same page!
          localStorage.page_available = Date.now();
      }

      if(e.key == "page_available"){
          alert("您已在其他分頁開啟過此頁面");
          return false;
      }

  };
  
  window.addEventListener('storage', onLocalStorageEvent, false);

以上的方法在chrome、firefox等瀏覽器上皆可正常運作，但是在safari上會有問題，警告會在第一個分頁就跳出
目前有被回報為safari的bug -> Storage events are fired for the same tab 

暫時可解的方法是在function內加上!document.hasFocus()，如下 （參考自此）

上述解法還是有問題，目前尚未找到有效解決方式