Question

我的主页

中有以下代码

<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
function loadQueryResults() {
    $('#DisplayDiv').load('toaction.php');
    return false;
}
</script>
<body>
    <div id="page">
        <form id="QueryForm" method="post">
            <div id="SubmitDiv" style="background-color:black;">
            <input type = "text" name="song"></input>

            <button type="submit" form="QueryForm" onclick="return loadQueryResults();">Submit Query</button>

            </div>
        </form>
        <div id="DisplayDiv" style="background-color:red;">
        </div>
    </div>
</body>
</html>

以下是我的toaction.php

<html>
<meta charset="utf-8">
<body>
    <div id="page" style="background-color:yellow;">
        <?php
            if( isset($_POST['song']) )
            {
            $song = $_POST['song'];
            echo $song;
            }
            else
            {
            echo "form didn't submit";
            }
        ?>
    </div>
</body>
</html>

这个想法是动态刷新div而不重新加载页面。哪个有效，但变量＆＃34;歌曲＆＃34;没有通过 - 所以div更新了＆＃34;表单没有提交＆＃34;。

提前致谢，

Answer 1

您未在$.load()来电中发送任何参数。另外，$.load()发送GET请求，而不是POST。试试这个：

function loadQueryResults() {
    $.post('toaction.php', $("#QueryForm").serialize(), function(response) {
        $('#DisplayDiv').html(response);
    });
    return false;
}

.serialize()将从给定表单中的所有字段构造参数列表，类似于普通表单提交（一个区别是提交按钮不会包含在参数中）。

Javascript表单按钮未提交

1 个答案: