ajp*_*nam 2 html javascript php ajax
我正在尝试使用ajax将文本从一个文本区域发布到php页面以回显到另一个textarea.当我这样做时,它适用于大约5个字符,然后完全停止.我尝试使用和不使用编码似乎没有什么区别,因为我只是尝试简单的计划文本,如"ddddddddddd".
在example.html中
<!DOCTYPE html>
<html>
<body>
<style>
.center{
margin: 0 auto;
margin-left: auto;
margin-right: auto;
text-align:center;
}
</style>
<div class="center">
<textarea onkeyup="changed()" onkeydown="changed()" onkeypress="changed()" id="b1" rows="30" cols="81">
</textarea>
<textarea id="b2" rows="30" cols="81">
</textarea>
</div>
</body>
</html>
<script>
function changed(){
var text =document.getElementById("b1").value;
if(!text){
text ="";
}
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
throw new Error("Ajax is not supported by this browser");
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('b2').value =xhr.responseText;
}
}
xhr.open('POST', 'echo.php');
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("text=" + text);
}
</script>
在echo.php中
<?php
$mytext = $_POST["text"];
echo $mytext;
?>
我看过几个类似的帖子,但没有一个能解决我的问题.我没有使用表格.我一定要吗？ Textarea没有用表格发帖
我不知道你要做什么,但如果你将脚本更改为:你可以用更少的要求实现相同的输出:
<script>
function changed(){
var text =document.getElementById("b1");
if(!text){
text ="";
}
else
{
text=text.value;
}
var text2 =document.getElementById("b2");
if(!text2)
{
text2.value=text;
}
}
</script>
希望能帮助到你.
编辑
现在发现错误,好像你是ajax请求随机返回.
现在,当第二个ajax首先响应时发生错误,所以第二个文本区域的值首先是'asdf',但是稍后在第一个ajax响应时,它会将当前值覆盖为'asd'.
要解决这个问题,请将脚本更改为:
<script>
var pending_request=false;
function changed(){
if(pending_request==false)
{
var text =document.getElementById("b1").value;
if(!text){
text ="";
}
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
throw new Error("Ajax is not supported by this browser");
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('b2').value =xhr.responseText;
pending_request=false;
}
}
pending_request=true;
xhr.open('POST', 'echo.php');
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("text=" + text);
}
else
{
setTimeout(function(){ changed(); }, 3000);
}
}
</script>
我们的想法是等待待定的ajax请求在发送另一个之前做出响应:D
PS:对不起我的英语不好.