如何在您的Javascript代码之前运行您的php POST代码？

时间：2016-09-26 17:27:27

标签： javascript php jquery

我有一个网站，其中包含显示在＆＃34; div＆＃34;中的所有错误消息。在页面顶部。我需要更改代码，以便错误显示为警报，但我无法弄清楚如何正确地计时。

我已经创建了一个更简化的例子，说明了我想要做的事情。

我希望发生以下情况：

  1. 用户在＆＃34;字母＆＃34;中键入一个字母;输入
  2. 用户点击提交按钮。
  3. 表单帖子和PHP代码检查键入的字母并设置变量（$ fruit）。
  4. HTML重新渲染，如果变量（$ fruit）有值，则将其放置在＆＃34; fruit＆＃34;输入。 （这里的目的是将结果放在Javascript可以到达的位置。）
  5. 然后Javascript执行并显示一条警告，显示＆＃34;水果＆＃34;输入

    6. 这是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，将其另存为单独的文件，然后传入新文件？

5 个答案:

答案 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端点

MY-Ajax的endpoint.php 

<?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方法

表单提交的Ajax钩子

$("#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/

相关问题
最新问题