表单数据在新页面中不可见 - PHP + Javascript

时间:2014-03-19 19:06:16

标签: javascript php jquery html ajax

我有一个包含一组超链接的页面。单击任何超链接应该将用户带到一个新页面,其中url作为POST数据发送。

我能做什么:
1.打开新页面。

我面临的问题:
1.在新页面中,我尝试访问作为数据发送的URL。网址不可见。我哪里错了?

到目前为止我的代码:

<html>
        <head>
                <title></title>
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
                <script type="text/javascript">
                        function takeMeHome(obj) {
                                var URL = obj.getAttribute("href");
                                //alert("Url = " + URL + " with id = " + obj.id);
                                console.log("URL = " + URL);
                                 $.ajax({
                                         type: 'POST',
                                         url: './bbCloud.php',
                                         data: {'tgt_url': URL},
                                         success:function(data) {
                                                 console.log("Function invoked. It seems posting data was a success");
                                                 window.location = URL;
                                                 //alert('This was sent back: ' + data);
                                         }
                                });
                                return false;
                        }
                </script>
        </head>
        <body>
                <p>
                        Choose one of the links below to access content:</p>
                <p><a href="./bbCloud.php" id="link1" onclick="takeMeHome(this); return false;">1. Email Etiquette</a></p>
        </body>
</html>

bbCloud.php:

<?php
//the function below displays data from bbMainPage javascript.
function getDataFromLibrary() {

    $tgt_url = $_POST["tgt_url"];
    echo "Data received = " . $tgt_url . "<br/>";
    return $tgt_url;
}

?>

<html>
<head>
<style>
.hlight{background-color:#ffcc00;}
textarea {
    width:100%;
    height:100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://myDomain/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">

//mention all global variables here.
console.log("this is the start of javascript");
//get all data from the previous script.
var tgtURL = "<?php getDataFromLibrary(); ?>";
console.log("URl obtained = " + tgtURL);
    </script>

<body>
<div>
<audio id="playText" src="" controls></audio>
</div>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

尝试动态创建并提交表单,而不是尝试ajax:

    <script type="text/javascript">
            function takeMeHome(obj) {
                    var URL = obj.getAttribute("href");
                    $('<form>', {
                        "html": '<input type="text" name="tgt_url" value="' + URL + '" />',
                        "action": URL
                    }).appendTo(document.body).submit();
            }
    </script>

答案 1 :(得分:1)

嗯,如果我没记错的话,发生的事情是你的$.ajax确实将POST数据发送到你的php文件。问题是,它发送帖子数据,执行php文件,然后发回一个响应,但是它被发送回$.ajax调用本身。你那么重定向到php文件(并因此再次运行),但没有发布数据。此外,$.('a').click(function(event) { event.preventDefault(); }的某些内容可能是一个好主意。当我回到家时,我会尝试为你做出更好的答案(目前在我的手机上,不应该很长)。