我的主页中有以下代码
<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 而无需重新加载页面。这是有效的，但是变量“song”没有被传递 - 所以 div 更新为“表单未提交”。
提前致谢，
最佳答案
您没有在 $.load() 调用中发送任何参数。此外，$.load() 发送 GET 请求，而不是 POST。试试这个:
function loadQueryResults() {
$.post('toaction.php', $("#QueryForm").serialize(), function(response) {
$('#DisplayDiv').html(response);
});
return false;
}
.serialize() 将从给定表单中的所有字段构造一个参数列表，类似于普通表单提交(一个区别是提交按钮不会包含在参数中) .
关于Javascript 表单按钮未提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25706157/