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

你可以玩这样的东西

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
    }
};
}

最好将PHP代码放在单独的脚本文件中。

说，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";
}
?>

并使用JavaScript将$url放在responseText页面的HTML中。修改代码中的相关区域。

如何使用PHP通过Ajax提交表单

1 个答案: