Question

我在这里的第一篇文章。我是Java / AJAX的新手，但我有一些PHP经验。我试图将html表单数据传递给php文件进行处理。目标是让php脚本处理表单数据并返回true / false标志。我正在尝试AJAX，因为我不想要屏幕刷新。根据php脚本的响应，弹出窗口将覆盖现有屏幕，并向用户显示信息。

我的HTML表单代码是： -

<form name="screen3" method="post" action="" id="scr3" />
<input type="image" src="images/proceed.jpg" alt="Proceed" id="proceed1" name="submit" value="Send" />
</form>

我已使用javascript重定向表单中的提交按钮： -

<script type="text/javascript">
$(document).ready(function() {
$('#proceed1').click(function(e) {
    e.preventDefault();
    x=validateScreen3();
    if (x) {getFormData();}
        })
    });
</script>

到目前为止一切顺利，validateScreen3（）被调用并验证用户条目（不会让你厌烦脚本）。调用getFormData，但这就是问题所在： -

function getFormData() {
var xmlhttp;
var emailAddress = document.getElementById("emailaddress").value;
var entryCode = document.getElementById("entrycode").value;
var acceptance = document.getElementById("acceptance").value;
var Sel = document.getElementById("sel").value;


xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST","test1.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("emailaddress="+emailAddress);
}

我已经确认变量数据已传递给函数ok，但上面引用的test1.php脚本似乎正在被调用/执行。这是test1.php文件： -

<?php
$here = $_POST['emailaddress'];
echo '</div></div>';
if (!empty($here)) {
echo '<div style="position:absolute; top:100px; left:300px; width:400px; height:200px; background-color:#CCC; color:#000; z-index:50;">';
echo 'got the variable '.$here;
echo '</div>';
}
else {
echo '<div style="position:absolute; top:100px; left:300px; width:400px; height:200px; background-color:#CCC; color:#000; z-index:50;">';
echo 'DIDNT GET the variable '.$here;
echo '</div>';
}

?>

这些div都没有显示出来，而且从我能想到的每个测试开始，文件都没有被调用。任何想法或建议将不胜感激。

Answer 1

您需要为XMLHttpRequest的{{1}}事件添加事件处理程序。当PHP发送响应时，将触发此事件：

onreadystatechange

但是既然您正在使用jQ，那么您无需担心所有这些标题......只需check $.ajax。

在某些时候，你可能想要抛弃jQ，因为你必须支持旧的浏览器（IE <9，甚至IE＆lt; 8）。在那种情况下this might prove helpful

澄清：
香草JS：

xmlhttp.onreadystatechange = function(response)
{
    if (this.readyState===4 && this.status===200)
    {//readyState 4 means request is finished
        document.body.innerHTML += response;//since it's an HTML response...
    }
};

这应该工作得很好。如果由于某种原因，它没有，请尝试使用jQuery：

var xhr =new XMLHttpRequest();
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function()
{
    if (this.readyState === 4 && this.status === 200)
    {//response is xhr property in vanilla JS
         document.body.innerHTML += this.responseText;
    }
    if (this.readyState === 4 && this.status !== 200)
    {//error in request
        console.log(this);//<-- check your console
        document.body.innerHTML += '<h1>Http error: ' + this.status;
    }
};
xhr.open("POST","test1.php", true);
xht.send("emailaddress="+emailAddress);

如果这对您不起作用，那么您的网址可能错误，或者运行PHP脚本的服务器位于其他网域，或者您必须发布后续问题。
希望这有帮助，但

Answer 2

您已编写JavaScript来发出HTTP请求，但您还没有编写任何内容来使用响应中的数据。

您需要等到响应回来，然后使用xmlhttp.responseText执行某些操作。

请参阅Using XMLHttpRequest。

使用xml将javascript变量发布到服务器

2 个答案: