如何通过AJAX将数据传递到PHP页面，然后在另一个DIV中显示该页面？
[英]How to pass data to PHP page through AJAX and then display that page in another's DIV?
问题描述
I have 2 pages with which I am working with: test1.php and test2.php. 
我有两个页面，我正在使用：test1.php和test2.php。 test1.php contains 2 <DIV> tags, one named "SubmitDiv" and the other named "DisplayDiv". test1.php包含2个<DIV>标签，一个名为“SubmitDiv”，另一个名为“DisplayDiv”。 In SubmitDiv, there is a check box and a submit button. 在SubmitDiv中，有一个复选框和一个提交按钮。 When the check box is checked and the submit button is clicked, I would like it to display test2.php in the DisplayDiv div tag. 选中复选框并单击提交按钮后，我希望它在DisplayDiv div标签中显示test2.php。 I have figured that much already. 我已经想了很多。
However, now I want test2.php to receive data from test1.php and process that data. 但是，现在我希望test2.php从test1.php接收数据并处理该数据。 In this case, it is receiving the checkbox's name, "chk" and will be printing that with an echo command. 在这种情况下，它正在接收复选框的名称“chk”，并将使用echo命令打印它。 This is where I am a bit stumped as to how to go about this. 这就是我对如何解决这个问题感到有点困惑的地方。 After searching a bit for an answer, this is what I have written so far: 在搜索了一下答案之后，这是我到目前为止所写的：
test1.php: test1.php：
<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>
<meta charset="utf-8">
<script type="text/javascript">
function sendQuery() {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'test2.php',
data: $('#SubmitForm').serialize(),
success: function() {
$('#DisplayDiv').load('test2.php');
}
});
return false;
}
</script>
<body>
<form id="SubmitForm" action="" method="post">
<div id="SubmitDiv" style="background-color:black;color:white;">
<input type="checkbox" id="chk" name="chk" form="SubmitForm" value="chk">CHECK</input><br>
<button name="submit" id="submit" type="submit" form="SubmitForm" onclick="return sendQuery();">Submit</button>
</div>
</form>
<div id="DisplayDiv"></div>
</body>
</html>
test2.php: test2.php：
<html>
<meta charset="utf-8">
<?php
$chk = $_POST['chk'];
echo $chk;
?>
</html>
When the submit button is clicked, however, all it does is refresh the page, rather than display the test2.php in the DisplayDiv like it's supposed to. 但是，当单击提交按钮时，它所做的只是刷新页面，而不是像它应该的那样在DisplayDiv中显示test2.php。 Any ideas on how to pass the data to test2.php and then also display it within the DisplayDiv section? 有关如何将数据传递给test2.php然后在DisplayDiv部分中显示它的任何想法？
5 个解决方案
解决方案1
2 已采纳 2013-10-02 20:28:26
Instead of .load function use the following 而不是.load函数使用以下内容
success: function(response) {
$('#DisplayDiv').html(response);
}
解决方案2
1 2013-10-02 20:30:40
If you want to use e.preventDefault(); 如果你想使用e.preventDefault(); you must pass the event to the function 你必须将事件传递给函数
function sendQuery(e) {
e.preventDefault();
//...
}
Otherwise I assume your form is simply submitted on click. 否则，我认为您的表单只需单击即可提交。
解决方案3
1 2013-10-02 20:40:55
You must first remove e.preventDefault(); 您必须先删除e.preventDefault(); in the sendQuery function because that is failing to return false onclick. 在sendQuery函数中，因为它无法返回false onclick。
Then change your AJAX call to as follows: 然后将您的AJAX调用更改为：
$.ajax({
type: 'POST',
url: 'test2.php',
data: $('#SubmitForm').serialize(),
success: function(data) {
$("#DisplayDiv").html(data);
}
});
解决方案4
0 2016-10-04 22:08:01
This works: 这有效：
$.ajax({
type: 'GET',
url: 'data.php',
data: {
"id": 123,
"name": "abc",
"email": "abc@gmail.com"
},
success: function (ccc) {
alert(ccc);
$("#result").html(ccc);
}
});
Include jQuery: 包含jQuery：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
解决方案5
-1 2016-10-04 22:11:38
data.php data.php
echo $id = $_GET['id']; echo $name = $_GET['name']; echo $email = $_GET['email'];
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.