我有一个网站,所有错误消息都显示在页面顶部的“div”中。我需要更改代码,以便错误显示为警报,但我不知道如何使计时正确。
我创建了一个更简化的示例来说明我正在尝试做的事情。
我希望发生以下情况:
- 用户在“字母”输入框中输入一个字母。
- 用户点击提交按钮。
- 表单发布和 PHP 代码检查输入的字母并设置变量 ($fruit)。
- HTML 重新呈现,如果变量 ($fruit) 有值,则将其放置在“fruit”输入中。 (这里的目的是将结果放在 JavaScript 可以访问的地方。)
- 然后,Javascript 执行并显示一条警报,其中显示“fruit”输入的内容。
这是 JavaScript:
/* myTestScripts.js */
$(document).ready(function() {
window.onsubmit = function (e) {
e.preventDefault();
alert($("#fruit").val());
};
});
这是我的index.php 文件:
<!DOCTYPE html>
<head>
<!-- Style for Zebra Dialog boxes -->
<link rel="stylesheet" href="zebra/zebra_dialog.css" type="text/css">
</head>
<header>
<h1>Testing My Dialogs and Alerts</h1>
</header>
<body>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$user_input = trim($_POST["letter"]);
if ($user_input == 'A') {
$fruit = "apples";
} elseif ($user_input == 'B') {
$fruit = "bananas";
} else {
$fruit = "No fruit for you!";
}
}
?>
<form id="form_to_submit" action="index.php" method="POST">
<fieldset>
<label>Type A for apples and B for bananas:</label>
<input type="text" name="letter" id="letter">
<input type="text" name="fruit" id="fruit" value="<?php if(isset($fruit)) {echo $fruit;} ?>">
<button type="submit" id="click">Click Here to see your fruit selection.</button>
</fieldset>
</form>
<!-- Link to jQuery file so any plug-ins can work
Including the production version here. Can also download one for better debugging. -->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<!-- Link to My Javascript code -->
<script type="text/javascript" src="myTestScripts.js"></script>
</body>
我的处理方式是错误的吗?
三天后......
好吧,似乎每个人都告诉我使用 AJAX。因此,我一直在观看教程,并且了解了总体思路,但我对应该传递的 URL 感到困惑。
这是我更新的 Javascript:(这是一个很大的罗嗦,但我正在尝试编写代码以使其在我的脑海中清晰可见。)
/* myTestScripts.js */
function sendAjax() {
// Use ajax short-hand for 'get'
$.ajax({
type: "POST", // Post vs Get
url: "index.php", // url
context: $('#letter').val() // data
}).done(function() { // callback function
alert("Here is your fruit: " + $('#fruit').val()); // Show alert based on data here
});
}
$('#theButton').bind('click', sendAjax);
这只是工作聚会。它不会更新“fruit”输入,因此也不会在警报中显示它。
如果处理此信息的 PHP 代码位于我的“index.php”文件中,那么这就是我传入的 URL 吗?或者我是否必须将所有处理代码从index.php中取出,将其另存为单独的文件,然后将新文件传递进去?
最佳答案
window.onsubmit() 在表单提交时、数据发送到服务器之前触发。如果您想在页面从服务器返回后根据您填写的 php 输入值生成警报,您可以执行以下操作:
$(document).ready(function() {
if($('#fruit').val() != '') {
alert($('#fruit').val());
};
});
这不一定是处理这种情况的最佳方法(正如其他人指出的那样),但我相信这是对您所问问题的最直接答案。
关于javascript - 如何让 php POST 代码在 Javascript 代码之前运行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39708892/