簡單的JavaScript AJAX發佈功能不工作

嗨我想發送數據到服務器，然後讓PHP文件保存它。但目前我無法獲得一個簡單的POST工作。簡單的JavaScript AJAX發佈功能不工作

這是JavaScript和HTML部分：此功能在頭部聲明：

function sendTableToServer(){ 
    var xhttp; 
    if (window.XMLHttpRequest){ 
     xhttp=new XMLHttpRequest(); 
    } else { 
     xhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xhttp.open("POST","http://music.collwyncraig.info/hajimama/save_setlist.php",true); 
    xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    xhttp.send("fsong=AbandonSeoul"); 
}

那麼這個網站是在身體：

<button type="button" onclick="sendTableToServer()">Save Setlist</button>

這是php文件

<?php 
if (isset($_POST["fsong"])){ 
    echo 'trying'; 
    $song = $_POST["fsong"]; 
    echo $song; 
    echo 'ok'; 
} 
?>

當我點擊按鈕時，沒有任何反應。如果我使用<form>和提交按鈕，php文件由瀏覽器加載，我可以訪問輸入。但是，我想使用這樣的函數，因爲我想要發送的信息將使用javascript和HTML DOM從HTML頁面中取出。那麼，爲什麼沒有發生什麼？ :)

來源

2012-04-07 collwyn

XHTTP的回調在哪裏？ – neoascetic 2012-04-07 04:59:16

曾經想過使用[jQuery]（http://jquery.com）？ – Fred 2012-04-07 05:01:07

如果你想相同的行爲作爲一種形式，除了要在頁面上獲取數據，只需要創建一個表格，並提交：

var form = document.createElement('form'); 
form.action = 'http://www.example.com/do-something'; 
form.method = 'post'; 
var song = document.createElement('input'); 
song.type = 'hidden'; 
song.name = 'song'; 
song.value = 'Song Name'; 
form.appendChild(song); 
form.submit();

來源

2012-04-07 05:05:42 icktoofay

這會導致回發。使用AJAX的全部理由是爲了避免這種情況。爲什麼會選擇這個？ – 2012-04-07 05:06:51

@Visionary：我對這個問題的解釋是他們想要將整個頁面替換爲通過表單提交，但他們想使用AJAX，因爲他們需要動態計算數據。 – icktoofay 2012-04-07 05:09:51

只需在onSubmit事件中使用'return false'，或者'event.preventDefault'來停止重新加載頁面。這一個缺失的細節不應該偏離這個解決方案的主要思想。 +1 – jmort253 2012-04-07 05:16:03

如果你不想使用jQuery AJAX，請嘗試使用純AJAX：

<html> 
    <head> 
    <script type="text/javascript"> 
    sendTableToServer() 
    { 

    if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
     } 
     else 
     {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     //document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
     } 
     } 
    xmlhttp.open("GET","http://music.collwyncraig.info/hajimama/save_setlist.php?fsong=AbandonSeoul", true); 
    xmlhttp.send(); 
    } 
    </script> 


<?php 
if (isset($_GET["fsong"])){ 
    echo 'trying'; 
    $song = $_GET["fsong"]; 
    echo $song; 
    echo 'ok'; 
} 
?>

來源：http://www.w3schools.com/php/php_ajax_php.asp

來源

2012-04-07 05:04:54

沒有必要炫耀！ – Gary 2012-04-07 05:06:32

@Gary看看他的暱稱:) – neoascetic 2012-04-07 05:07:37

這似乎接近我除了使用GET而不是POST。我是否錯過了你錯過了在xmlhttp.open（）方法中的.php文件的名字？ – collwyn 2012-04-07 05:51:51

記住AJAX本質上是異步的。您應該爲完成和錯誤條件定義回調，因爲您的數據不會立即返回。你可能想要follow this Google tutorial on AJAX。如果可用的話，JQuery的確會簡化這個過程。

如果您的唯一目標是將數據發送到服務器以寫入文件，則不需要AJAX或Javascript。只需設置<form action="http://music.collwyncraig.info/hajimama/save_setlist.php">並將要發送到服務器的數據放在表單標籤中即可。爲AJAX使用Javascript的唯一原因是「更好的行爲」，這可能比您正在尋找的簡單用法更爲複雜。

來源

2012-04-07 05:05:23

如果你正在做一個POST到ISN域與地址欄中的內容相同，它將失敗。你不能讓跨域的AJAX請求：

xhttp.open("POST","http://music.collwyncraig.info/hajimama/save_setlist.php",true);

嘗試刪除的方案和域：

xhttp.open("POST","/hajimama/save_setlist.php",true);

這將POST請求相對使當前域作爲HTTP和域名這裏不需要。

來源

2012-04-07 05:06:59 jmort253

啊呀。實際上它是相同的域，我只寫了完整的URL來檢查只使用文件名不是問題。謝謝。 – collwyn 2012-04-07 05:49:50

簡單的JavaScript AJAX發佈功能不工作

回答

相關問題