我一直不愿意提出问题，但经过 6 个多小时的斗争，我现在已经斗鸡眼了。 我对 PHP 和 HTML 有一些经验，但 Ajax 和 jQuery 对我来说是新的(我昨天第一次听说它)。
我希望页面在 div class="result"内显示提交的值而不刷新。无论如何，工作流程:
j.php 加载 > 用户填写两个文本字段(电话和 gz) > 单击“提交”按钮 > jpost.php 被调用并回显变量 > PHP 变量需要在 j.php 上显示为 div class=result
j.php =
<html>
<head>
<script src="//code.jquery.com/jquery-latest.js"></script> <!-- load jquery via CDN -->
<script>
$(document).ready(function() {//start document ready
$('#submit-button').click(function (){
$.ajax({
type: 'POST',
url: 'jpost.php',
data: $("#cdr").serialize(),
success: function(d){
$(".result").html(d);
}
});
});
});//end document ready
</script>
</head>
<body>
<div id="cdr">
<div>
<input type="text" id="phone" name="phone" value="" placeholder="phone" size="40" />
</div>
<div>
<input type="text" id="gz" name="gz" value="" placeholder="gz" size="40" />
</div>
<div>
<button id="submit-button">Submit</button>
</div>
</div>
<div class="result"></div>
</body>
</html>
jpost.php
<?php
$phone = $_POST['phone'];
$gz = $_POST['gz'];
echo $phone;
echo $gz;
print_r($_POST);
echo "grrrr"
?>
所以我想要的只是 $gz 和 $phone 在 j.php 上的结果 div 中回显，但显示的只是:
数组() grrrrr
这让我相信我的变量在某个地方丢失了:P或者我错误地回应了它们。
非常感谢您的帮助!
最佳答案
简短
问题是:
1.您需要一个表单来序列化数据(而不是 div )2.您需要防止事件的默认行为
长
为了序列化数据，您需要一个表单。我创建了带有 id #cdr-form 的表单
另外，您需要确保使用 e.preventDefault() 阻止按钮(事件)的默认行为。 Read more about it here
<html>
<head>
<script src="//code.jquery.com/jquery-latest.js"></script> <!-- load jquery via CDN -->
<script>
$(document).ready(function() {//start document ready
$('#submit-button').click(function (e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'http://localhost/~metaly/tests/j.php',
data: $("#cdr-form").serialize(),
success: function(d){
$(".result").html(d);
}
});
});
});//end document ready
</script>
</head>
<body>
<div id="cdr">
<form id="cdr-form">
<div>
<input type="text" id="phone" name="phone" value="" placeholder="phone" size="40" />
</div>
<div>
<input type="text" id="gz" name="gz" value="" placeholder="gz" size="40" />
</div>
<div>
<button id="submit-button">Submit</button>
</div>
</form>
</div>
<div class="result"></div>
</body>
</html>
关于javascript - 如何提交 HTML 表单，使用 ajax 处理，并在同一页面的 DIV 中显示 PHP 变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23302218/