PHPを使用してAjax経由でフォームを送信する方法

Question

私は完全なAjax初心者です。

私の非AJAXフォームは現在、次のようになります。

<?php 
if(!empty($_POST['D1']) && !empty($_POST['T1'])){ 
    $providers = array(
     'google_drive' => 'Goole drive^https://drive.google.com/file/d/{replace}/view', 
     'clody' => 'Cloudy^https://www.cloudy.ec/embed.php?id={replace}',   
    ); 

    if(isset($providers[$_POST['D1']])){ 

     $url = str_replace('{replace}', $_POST['T1'], $providers[$_POST['D1']]); 
     echo "$url"; 
    } 


} 
?> 

<form method="POST" action=<?php ($_SERVER["PHP_SELF"]); ?>> 

    <p>chose url: 
    <select size="1" name="D1"> 
     <option value="google_drive">google drive</option> 
     <option value="clody">clody</option> 
    </select>  
    <input type="text" name="T1" size="40">  
    <input type="submit" value="go" name="B1"> 
    <input type="reset" value="reset" name="B2"> 
    </p> 
</form> 

これは私がページを更新せずに送信できるようにしたいので、フォーム情報をバックグラウンドで提出されることを除いて、正常に動作します。私はAjaxがここに行く道だと知っています。私はそれについて多くのことを読んでいますが、私はそれをうまく動かすことができません。私は、Ajaxスクリプトがリトリーブ部分を置き換えるか、それとも連携して動作するかは不明です。

Answer 1

あなたが別のスクリプトファイルにPHPコードを置けばそれはまた最高です。この

document.getElementById('myform').addEventListener("submit",upload); 
function upload() 
{ 
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST","/upload.php",true);   
    var formdata = new FormData(myform); 
    xhr.send(formdata); 

    xhr.onreadystatechange = function(){ 
    if(xhr.readyState == 4 && xhr.status == 200) 
    { 
     //some code to check if submission succeeded 
     url = xhr.responseText(); 
     if(url == 'failed') 
       console.log('upload failed'); // do something for failure    
     else 
       document.getElementById('urlBox').innerHTML = url; // after creating a div with id urlBox 
    } 
}; 
} 

のようなもので遊ぶことができます。

セイ、upload.php

<?php 
if(!empty($_POST['D1']) && !empty($_POST['T1'])){ 
    $providers = array(
     'google_drive' => 'Goole drive^https://drive.google.com/file/d/{replace}/view', 
     'clody' => 'Cloudy^https://www.cloudy.ec/embed.php?id={replace}',   
    ); 

    if(isset($providers[$_POST['D1']])){ 

     $url = str_replace('{replace}', $_POST['T1'], $providers[$_POST['D1']]); 
     echo "$url"; 
    } 
} 

else{ 
    echo "failed"; 
} 
?> 

そしてHTMLページにその場所にresponseTextに$urlを置くためにはJavaScriptを使用しています。コード内の関連する領域を変更します。