Javascript 发布到 php 并无法检索数据答案

【问题标题】：Javascript post to php and failed to retrieve dataJavascript 发布到 php 并无法检索数据
【发布时间】：2013-11-10 20:15:31
【问题描述】：

我打算制作一个提供词汇测验的动态网站。我修改了一些 w3school 示例，但没有成功。

<?php 

?>

<script>
//var vocabid;
var ans;
function getnumber(str)
{

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)
    {
return xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getnumber.php?q="+str,true);
xmlhttp.send();

}


function getvocab(str)
{
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("vocab").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getvocab.php?q="+str,true);
xmlhttp.send();
}

function getpart(str)
{
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("part").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getpart.php?q="+str,true);
xmlhttp.send();
}

function getchi(str)
{
var inner_ans
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)
    {
    inner_ans=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getchi.php?q="+str,true);
xmlhttp.send();
return inner_ans;
}



function loadvocab()
{
//vocabid=Math.floor((Math.random()*2)+1);
vocabid=getnumber();
//vocabid= document.getElementById("num_result").value;
getvocab(vocabid);
getpart(document.getElementById("num_result").value);
var ans=getchi(vocabid);
//document.getElementById('number').innerHTML = document.getElementById("num_result").value;
//document.write(document.getElementById("num_box").value;);
//document.write(ans);
}
</script>
</head>


<body>
<div name="vocab" style="width:300px; top:10px ; background-color:rgb(255,0,255);display:inline-block; position:relative;">
vocab
<span id="vocab"></span>
</div>
<div name="part" style="width:100px;position:relative;background-color:rgb(255,0,255);display:inline-block;">
pt. of speech
<span id="part"></span>
</div>
<div name="chi" style="width:100px;position:relative;background-color:rgb(255,0,255);display:inline-block;">
chi
<span id="chi"></span>
</div>
<br>
<div name="ans_box" style="width:100px;position:relative;background-color:rgb(255,0,255);display:inline-block;top:100px;">
<form name="ans">
<input type="text" name="ans_text">
</form>
<span id="number"></span>
</div>
<div name="check" style="width:300px;left:10px; top:100px ; background-color:rgb(255,0,255);display:inline-block; position:relative;" onclick="check_vocab(document.ans.ans_text.value)">
check
<span id="check"></span>
</div>
<font  id="num"></font>
<div name="next" style="width:100px;left:10px;position:relative;background-color:rgb(255,0,255);display:inline-block;top:100px; " onclick="loadvocab();">
next
</div>
<div  style="width:100px;left:10px;position:relative;background-color:rgb(255,0,255);display:inline-block;top:100px;">
<form name="result">
<span id="txtHint"></span>
<input type="button" onclick=" getpart(1);">
<input type="button" onclick=" getvocab(1);">

<input type="button" onclick=" getchi(1);">
</form>
</div>
<div id="num_box">



</div>

当点击“下一个” div 时，它会通过一些 js 函数并从访问文件中获取新单词。但是第一个会在 php 中生成一个随机数，但未能返回，变量只包含“未定义”。但正如你所看到的，它与按钮一起工作。
后来我尝试将变量放在文本框中并使用 js 获取它，但需要单击 2 次才能将数据返回到“span”标签。
你们能帮我弄清楚发生了什么，或者给我建议吗？
编辑：soultion 支持 unicode 吗？因为我在数据库中有一些 unicode 字符。

【问题讨论】：

请在此处发布代码，或者至少发布其中的重要部分。无法保证代码会永远存在于链接中，届时链接将毫无意义。
代码示例是使用 ajax 的准系统方法。您是否有任何理由不能使用使这更容易的库（例如 jquery）。
你能大致解释一下如何使用jquery来做到这一点吗？对不起，我是 js 的菜鸟。
api.jquery.com/jQuery.ajax w3schools.com/jquery/ajax_ajax.asp viralpatel.net/blogs/…
谢谢。使用 ajax + jQuery 解决。

标签： javascript php jquery sql xmlhttprequest

【解决方案1】：

Ajax 调用是异步的。当您调用 getNumber 函数时，浏览器会调用服务器并等待响应。同时，浏览器继续做一些事情并使用一个未定义的变量（vocabid，因为服务器还没有回答）。你需要在你的ajax调用上实现回调。

例子：

// declare getnumber
function getnumber(okfn) {
    // do ajax call and write an onreadystatechange function like this:
    xmlhttp.onreadystatechange=function() {
        if(xmlhttp.readyState==4 && xmlhttp.status==200) {
            okfn(xmlhttp.responseText);
        }
    }
}
// use getnumber
getnumber(function(resp) {
    getvocab(resp);
});

getvocab 和其他带有ajax 调用的函数也是异步的，所以你需要再次使用回调。

【讨论】：