简单的 javascript AJAX 发布功能不起作用答案

【问题标题】：simple javascript AJAX post function not working简单的 javascript AJAX 发布功能不起作用
【发布时间】：2012-04-07 04:55:23
【问题描述】：

您好，我想将数据发送到服务器，然后让 php 文件保存它。但目前我什至连一个简单的 POST 都无法工作。

这是 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");
}

那么这个html就在body里面：

<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 页面中取出。那么，为什么什么都没有发生呢？ :)

【问题讨论】：

XHTTP 回调在哪里？
有没有想过使用jQuery？

标签： javascript ajax function post

【解决方案1】：

如果您想要与表单相同的行为，只是想从页面获取数据，只需创建一个表单并提交即可：

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();

【讨论】：

这会导致回发。使用 AJAX 的全部原因是为了避免这种情况。为什么要提出这个建议？
@Visionary：我对这个问题的解释是他们想替换整个页面，就好像它是通过表单提交的一样，但他们想使用 AJAX，因为他们需要动态计算的数据。
只需在 onSubmit 事件中使用return false，或使用event.preventDefault 来阻止页面重新加载。一个缺失的细节不应该有损此解决方案的主要思想。 +1
@jmort253：这两种解决方案都会阻止数据发送到服务器，使其毫无意义。但是，将表单的 target 设置为 iframe 即可。（虽然如果那是你想要的，还不如使用 AJAX（正确））
@icktoofay - 我在表单 onclick 事件中成功使用了这种技术。据我了解，它也应该与 onsubmit 一起使用。如果您知道这是不正确的，请随时回滚我的编辑。

【解决方案2】：

如果不想使用 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

【讨论】：

没有必要大喊大叫！
@Gary 看看他的昵称 :)
这似乎接近我所拥有的，除了使用 GET 而不是 POST。我是否正确您错过了在 xmlhttp.open() 方法中写入 .php 文件的名称？

【解决方案3】：

如果您向与地址栏中的内容不同的域进行 POST，它将失败。您不能发出跨域 AJAX 请求：

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

尝试删除方案和域：

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

这将使 POST 请求相对于当前域，因为这里不需要 http 和域。

【讨论】：

啊是的。实际上它是同一个域，我刚刚编写了完整的 URL 来检查仅使用文件名是否没有问题。谢谢。

【解决方案4】：

请记住，AJAX 本质上是异步的。您应该为完成和错误条件定义回调，因为您的数据不会立即返回。您可能想follow this Google tutorial on AJAX。 JQuery 确实简化了这个过程（如果有的话）。

如果您的唯一目标是将数据发送到服务器以写入文件，则不需要 AJAX 或 Javascript。只需设置<form action="http://music.collwyncraig.info/hajimama/save_setlist.php"> 并将您要发送到服务器的数据放入表单标签中。为 AJAX 使用 Javascript 的唯一原因是“更好的行为”，这可能比您正在寻找的简单用法更复杂。

【讨论】：