gpt4 book ai didi

javascript - 如何提交 HTML 表单,使用 ajax 处理,并在同一页面的 DIV 中显示 PHP 变量

转载 作者:行者123 更新时间:2023-12-02 17:28:27 25 4
gpt4 key购买 nike

我一直不愿意提出问题,但经过 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com