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

Posted

技术标签:

【中文标题】使用 xml 将 javascript 变量发布到服务器【英文标题】:Posting javascript variable to server using xml 【发布时间】:2013-06-03 12:43:33 【问题描述】:

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

我的 HTML 表单代码是:-

<form name="screen3" method="post" action="" id="scr3" />
<input type="image" src="images/proceed.jpg"  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);

我已经确认变量 data 可以正常传递给函数,但是上面引用的 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 都没有出现,从我能想到的每一个测试中,文件根本没有被调用。任何想法或建议将不胜感激。

【问题讨论】:

Java !== JavaScript,甚至不接近 (==),它们是完全不同的语言 【参考方案1】:

您需要为XMLHttpRequestonreadystatechange 事件添加一个事件处理程序。当 PHP 发送响应时,将触发此事件:

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...
    
;

但是由于您使用的是 jQ,所以您不必担心所有这些标头...只需 check $.ajax

在某些时候,您可能想要放弃 jQ,因为您必须支持旧版浏览器(IEthis might prove helpful

澄清一下: 香草JS:

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

这应该可以正常工作。如果由于某种原因没有,请使用 jQuery 尝试如下:

$.ajax( url: 'test1.php',
         type: 'POST',
         data: emailaddress: $('#emailaddress').val(),
         success: function(response)
         
              document.body.innerHTML += response;
         
);

如果这对您不起作用,则可能是您的 url 错误,或者运行您的 PHP 脚本的服务器位于另一个域上,或者您必须发布后续问题。 不过希望这会有所帮助

【讨论】:

谢谢。让 php div 显示仍然没有运气,但我认为它更多的是逻辑流程而不是编码语法。将尝试您推荐的 ajax 脚本,看看效果如何。 @DaveTeasdale:为您添加了一些完整的示例,以及您可能需要考虑的其他一些事情。我的第一个答案不起作用的主要原因可能是因为我忘记了,在 Vanilla JS 中,响应没有传递给 readystatechange 处理程序,而是作为属性分配给 XHttpRequest 对象实例本身。不过,我的“新”sn-ps 解决了这个问题。快乐编码【参考方案2】:

您已经编写了 JavaScript 来发出 HTTP 请求,但您还没有编写任何代码来使用响应中的数据。

你需要等到响应回来,然后用xmlhttp.responseText做一些事情。

见Using XMLHttpRequest。

【讨论】:

以上是关于使用 xml 将 javascript 变量发布到服务器的主要内容,如果未能解决你的问题,请参考以下文章

如何将输入/选择值从网站保存到 XML/JSON 文件并使用 JavaScript 自动加载再次填充它们

将 xml 从 URL 获取到变量中

使用javascript将变量添加到当前URL [重复]

将变量从 PHP 获取到 JavaScript [重复]

将变量从VB函数传递到客户端javascript

我可以将变量从我的 javascript 传递到 jsp 文件吗?