我有一个网站，其中包含显示在＆＃34; div＆＃34;中的所有错误消息。在页面顶部。我需要更改代码，以便错误显示为警报，但我无法弄清楚如何正确地计时。
我已经创建了一个更简化的例子，说明了我想要做的事情。
我希望发生以下情况：
这是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);
这只是派对。它没有更新＆＃34;水果＆＃34;输入，因此它也不会在警报中显示它。
如果处理此信息的PHP代码位于我的＆＃34; index.php＆＃34;文件，是我传入的URL吗？或者我是否必须获取index.php的所有处理代码OUT，将其另存为单独的文件，然后传入新文件？
答案 0 :(得分：1)
如何在您的Javascript代码之前运行您的php POST代码？
除了使用ajax之外，您的PHP代码之前就像javascript一样运行。
在您的情况下，您只想在警报中显示某些内容。如果我理解你，你必须将包含“错误”和echo的变量存储到javascript变量中。
当然，以下行应该在同一个php文件中。
<script type="text/javascript">
var error = "<?php echo $error; ?>";
alert(error);
</script>
答案 1 :(得分：1)
window.onsubmit（）在提交表单时触发，但在将数据发送到服务器之前触发。如果您想在页面从服务器返回后根据您填写的输入值生成警报，您可以执行以下操作：
$(document).ready(function() {
if($('#fruit').val() != '') {
alert($('#fruit').val());
};
});
这不一定是处理这种情况的最佳方式（正如其他人指出的那样），但我相信这是你所要求的最直接的答案。
答案 2 :(得分：1)
一个更标准和更灵活的模式是将要用ajax请求完成的PHP作为自己的文件分开，而不是直接在HTML中。
所以让我们创建一个ajax端点
<?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!";
}
echo json_encode(array("fruit" => $fruit)); // encode as json
}
现在我们有一个HTML表单，我们希望使用jQuery处理ajax请求。
<form id="form_to_submit" action="my-ajax-endpoint.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">
<button type="submit" id="click">Click Here to see your fruit selection.</button>
</fieldset>
</form>
我们挂钩了表单onsubmit方法
$("#form_to_submit").submit(function (evt) {
evt.preventDefault();
var $form = $(this); // the form we are acting on
// xhr is a defered object
var xhr = $.ajax({
url: $form.attr('action'), // the url of the action
data: $form.serialize(), // send all the form fields
method: $form.attr('method') // POST or GET
});
// handle the data
xhr.done(function (data) {
// find the fruit field and store the fruit value
$form.find("[name=fruit]").val(data.fruit);
alert("Your fruit: " + data.fruit);
});
// handle HTTP errors
xhr.fail(function (jqXHR, textStatus) {
alert("Error: " + textStatus);
});
}）;
这是一种灵活的模式，可以用于许多不同的用例。您可以使用关联数组使用json_encode()传回更多数据。使用$form.find("[name=youinput]")可以轻松地更新表单元素。
答案 3 :(得分：0)
我建议在jQuery / Client Side中执行此操作。
注意：这不能回答你的问题，这只是一个建议。
这样，您无需重新加载页面。
向提交按钮添加onClick侦听器，并使用preventDefault阻止提交。
然后进行检查并将结果插入输入：
$('#click').click(function(event){
event.preventDefault();
var letter = $('#letter').val(),
fruit = "No fruit for you!";
switch(letter){
case 'A':
fruit = 'Apple';
break;
case 'B':
fruit = 'Banana';
break;
}
$('#fruit').val(fruit);
});
答案 4 :(得分：0)
嗯，这不是你应该如何解决这个问题......
我相信你想要实现的目标可以简单地用Ajax完成。
我喜欢使用jQuery来进行Ajax调用，这是一个例子：
$.ajax({
url: "test.html",
context: yourFormFields
}).done(function() {
$( this ).addClass( "done" );
});
如果您想了解更多： http://api.jquery.com/jquery.ajax/