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

解決新版google chrome 影片或聲音無法自動播放的問題 (Fix google chrome Autoplay policy)

google chrome在76版後把chrome://flags內的autoplay policy移除了
這樣對做單機版或是需要特定網址能執行影片或聲音autoplay的開發者影響很大

經過一番搜尋研究，目前可解決的方式如下：

A.經由Chrome的設定

1. 開啟chrome的設定
   (chrome / setting)
2. 點擊左側的「進階」內的「隱私權和安全性」
   (Advanced / Privacy and Security )
3. 點擊右側視窗的「網站設定」內的「音訊」
   (Site Settings / Sound)
4. 開啟「允許網站播放音訊」的選項
   (Enable Allow Sites to Play Sound)
5. 新增允許自動播放的網址，如果檔案放在本機播放的話可輸入如下：
   localhost:8080  <-- 後面的port號視自己開放的port而定
   * 無法直接設定檔案位置 如：file://users/xxx/www/index.html 
   (Add the URL (localhost, etc) to the Allow area)
6. 關閉並重新啟動chrome，在網址列輸入localhost:8080 即可
   (Close and re-open chrome)

B.經由Command line加上參數執行chrome這一個方法，據說是google官方開發人員表明會保留的語法，那就是以command line的方式執行

MacOS :

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --autoplay-policy=no-user-gesture-required

Windows :
可以新增一個chrome的執行捷徑，在捷徑icon上點擊滑鼠右鍵選「內容」，在「目標」欄位內"C:\Program Files\Google\Chrome\Application\chrome.exe"的後方加上

--autoplay-policy=no-user-gesture-required

整句如下：(注意chrome.exe後方的空格)

"C:\Program Files\Google\Chrome\Application\chrome.exe" --autoplay-policy=no-user-gesture-required

或是撰寫一個.bat檔案把執行語法加上然後丟進windows的啟動資料夾，那麼開機後就會自動執行，bat上的語法如下

@echo off
start chrome.exe http://localhost:5438/ --kiosk --autoplay-policy=no-user-gesture-required

分享到Line的連結，點擊後用預設瀏覽器開啟 line link open in default browser

在Line上面分享的連結，用手機瀏覽點擊後會開啟Line app內的瀏覽器in-app-bbrowser，
以這種UIWebView方式開啟網頁會導致一些javascript語法或功能失效
解決方式：
在分享到line的連結後面加上一段 ?openExternalBrowser=1 就可以了。

譬如：https://yahoo.com.tw/?openExternalBrowser=1

加上該參數的網址分享到line上面，收到訊息的那一方點擊後就會跳出用手機預設的瀏覽器開啟了。

另外也不一定要每段分享的連結都加，如果只是網頁內的某個連結希望點擊後是用手機預設瀏覽器開啟，那網頁內寫那段連結時只要在連結後面加上?openExternalBrowser=1 即可

這樣使用者用app內瀏覽器瀏覽網頁時只要點到那個連結，就會開啟手機預設的瀏覽器去瀏覽連結頁面。

ajax 送出form資料時以javascript語法console.log出FormData用來檢查表單資料的方法

以form方式用ajax送出表單時，用以下javascript語法可以console.log要送出的資料，方便做檢查使用：

var formid=$('#myForm'); //#myForm是表單的ID
var formData = new FormData(formid[0]); 
for (var pair of formData.entries()){ 
   console.log(pair[0]+ ' ----> ' + pair[1]); 
}

cordova向php發出ajax請求時出現No 'Access-Control-Allow-Origin' header is present on the requested resource錯誤

雖然請求還是成功發出，但是會無法收到請求後的msg回覆
也可能導致在裝置上執行出問題
解決方式是在伺服器端的php程式上加上下列這行

header("access-control-allow-origin: *");

cordova 寫在index內的javascript無法執行

以cordova開發app時，在檔案內直接寫入如下
<script>
....
</script>

在Chrome的dev tool中檢查時出現下面的錯誤：
"cordova script Refused to execute inline script because it violates the following Content Security Policy....."

這是因為要降低XSS漏洞的風險，所以禁止了inline的javascript，這會使chrome把直接寫在index內的javascript語法以及一些行內事件如onClick的事件執行都擋住。

解決方法有兩種：

1.啟用行內的JS
在cordova專案的index.html上面也有標注：

Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:

* Enable inline JS: add 'unsafe-inline' to default-src

所以只要把unsafe-inline 加進 default-src內即可，如下

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

2.把script另外寫成一個js檔案，再連結進來即可