我可以在表单提交上调用php文件，并从中调用或回显JS函数吗？

Question

所以我基本上试图创建一个

的HTML表单

1. 通过php POST方法处理我的登录
2. 使用javascript关闭我的登录lighbox，或显示错误（现在我正在使用JS更改登录表单下的隐形表单值。

HTML

      if (isset($_GET['error'])) {
             echo '<p class="error">Error Logging In!</p>';
          }?>
      <br />
       <form action="process_login.php" method="post" name="login_form">                      
           Email: <input class="searchform" type="text" name="email" size="20"/><br />
           Password: <input class="searchform" type="password" 
                         name="password" 
                           id="password" size="20"/><br />
          <input type="button"  class="searchform"
               value="Submit" size="40"  style="height:45px; width:90px"
               onclick="formhash(this.form, this.form.password);" /> 
   <input type="text" id="errorbox" style="height:45px; width:180px" value=""><br>
   </form>

这是php文件：

    if (isset($_POST['email'], $_POST['p'])) {
      $email = $_POST['email'];
      $password = $_POST['p'];

      if (login($email, $password, $mysqli) == true) {
      // Login success 
    echo "<script>document.getElementById('light').style.display=
      'none';document.getElementById('fade').style.display=    'none'</script>";
    } else {
      // Login failed 
      echo "<script>document.getElementById('errorbox').value='Error'</script>";
  }
  } else {
     // The correct POST variables were not sent to this page. 
     echo 'Invalid Request';
   }






我知道我做得不对，我只是不确定如何做到这一点......

Answer 1

嗯，是的，从技术上讲你可以做到这一点，但这是一个非常糟糕的做法，而且非常不干净。

您更喜欢使用Ajax，并在其成功回调中执行这些JS操作：

注意：您需要在脚本中加入jQuery lib。

另一个没有：如果你的服务器上没有PHP 5.4，只需删除第二个回调函数，并处理成功回调中的所有场景

!(function($){
   $(function() {
         $('#submitBtn').on('submit', function(){
            $.post('process_login.php', $('form[name="login_form"]').serialize(), function(data){
              //data is a json object which contans the reponse
              data = $.parseJSON(data);
              $("fade").fadeOut();
              $("light").fadeOut();
            },
            function(data){//error callback
              data = $.parseJSON(data);
              if(data.forbidden){
                  $("#errorBox").html("Error!");
              }
              else if(data.error){
                $("#errorBox").html("Invalid request!");
              }
            });
          });

    });
})(window.jQuery);

HTML：

<form name="login_form">
  <div>
    <input type="text" name="email" placeholder="email">
  </div>
  <div>
    <input type="password" name="p" placeholder="password">
  </div>
  <div>
    <input type="button" id="submitBtn" value="Login">
  </div>
</from>

PHP：

$response = array();
if (isset($_POST['email'], $_POST['p'])) {
  $email = $_POST['email'];
  $password = $_POST['p'];

      if (login($email, $password, $mysqli) == true) {
          http_response_code(200);//HTTP OK, requires php 5.4
          $response['success'] = true;

    } else {
      // Login failed 
      $response['forbidden'] = true;
      http_response_code(401);//HTTP forbidden
  }
  } else {
     // The correct POST variables were not sent to this page. 
      $response['error'] = true;
      http_response_code(400);//HTTP bad request
   }

echo json_encode($response);

Answer 2

将onsubmit事件属性添加到表单： <form onsubmit="return validate();"> ...

其中validate（）是一个关闭lightbox的js函数，如果表单没问题则返回true，或者显示错误，如果表单不好则返回false。