好吧,我花了一些时间,但我想我找到了你问题的答案,或者至少这个解决方案可以为你提供一个很好的线索,告诉你如何继续你正在做的事情。
第一个index.php:在这里你需要有一个带有输入字段和一个按钮的表单,我们将其称为模态,并提交表单(使用Ajax进行发布)
<form id="form" method="post">
<div id="userDiv"><label>UserId</label>
<input type="text" name="userId" id="userId" placeholder="UserId"/> <br></div>
<button type="button" id="btn" class="btn btn-info" data-toggle="modal" data-target="#myModal">Send Data</button>
</form>
然后您需要一个模式,您可以在其中放置来自远程页面的内容。在 modal-body 中,您再添加一个带有 id="bingo" 的 div 标签,以便轻松找到他:),如下所示:
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">MyModal</h4>
</div>
<div class="modal-body">
<div id="bingo"></div>
</div>
</div>
</div>
</div>
该页面还需要有一个脚本标签来完成这项工作。重要的必须放置它after加载 jquery 文件的脚本标记。
<script>
$(document).ready(function(){
$("#btn").click(function(){
var vUserId = $("#userId").val();
if(vUserId=='')
{
alert("Please enter UserId");
}
else{
$.post("result.php", //Required URL of the page on server
{ // Data Sending With Request To Server
user:vUserId,
},
function(response,status){ // Required Callback Function
$("#bingo").html(response);//"response" receives - whatever written in echo of above PHP script.
$("#form")[0].reset();
});
}
});
});
</script>
最后但并非最不重要的 result.php:
<?php
if($_POST["user"])
{
$user = $_POST["user"];
// Here, you can also perform some database query operations with above values.
echo "Your user id is: ". $user;
}
?>
附:我希望我没有弄乱 id、变量或类似的地方,因为我试图根据您的示例调整解决方案。我希望这是您所需要的,或者至少这将是完成您的任务的线索。仍然认为这可以在一页上完成,但尝试找到一种方法来完成这项工作对我来说很有趣...... GL!