javascript - 如何让 php POST 代码在 Javascript 代码之前运行?

标签 javascript php jquery

我有一个网站,所有错误消息都显示在页面顶部的“div”中。我需要更改代码,以便错误显示为警报,但我不知道如何使计时正确。

我创建了一个更简化的示例来说明我正在尝试做的事情。

我希望发生以下情况:

  1. 用户在“字母”输入框中输入一个字母。
  2. 用户点击提交按钮。
  3. 表单发布和 PHP 代码检查输入的字母并设置变量 ($fruit)。
  4. HTML 重新呈现,如果变量 ($fruit) 有值,则将其放置在“fruit”输入中。 (这里的目的是将结果放在 JavaScript 可以访问的地方。)
  5. 然后,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/

相关文章:

javascript - 获取 jQuery 和/或 DOM 对象的 HTML 字符串

javascript - 在jquery中结合toggle和fadeTo

php - SQL 查询 - 包含不起作用的查询

php - 从 iOS 向 PHP 服务器发送 POST 请求?

jquery - Node.js Express jquery ajax 请求不起作用

javascript - 在 HTML 中使用脚本模板是一种不好的做法吗?

创建元素时的 jQuery 事件

javascript - 需要外部 JavaScript 文件

使用 JSON 对象将 PHP 数组转换为 JavaScript - 返回 null

php - 将 wordpress 网站移动到不同的 url