我如何在没有页面刷新的情况下使用 ajax/jquery 在我的弹出表单框中显示 php 错误消息

Question

我是网络开发的新手。 我有一个 html 页面，点击“注册按钮”后会出现一个弹出注册表。 在此注册表单中，我使用 Php (regProcess.php) 页面验证所有错误。 在 html 表单中，我设置了action attribute = "regProcess.php"这样。 它正在验证该 php 页面的表单并在同一页面上显示错误消息。 但是我想在这个弹出的 html 表单上显示所有 php 错误消息。 我不知道我该怎么做。 你能给我一个解决方案或告诉我我该怎么做这份工作吗？

html格式：

<form id="form1" method="post" action="regProcess.php">
<table width="500" border="0" cellspacing="10" cellpadding="0">
  <tr>
    <td>Title</td>
    <td><select name="title">
        <option value="">--Select--</option>
        <option value="mr">Mr.</option>
        <option value="ms">Ms.</option>
        <option value="mrs.">Mrs</option>
    </select></td>
  </tr>
  <tr>
    <td>First Name</td>
    <td><input type="text" name="fname" value="<?php if(isset($_POST['fname'])) echo $_POST['fname']; ?>" class="tr" placeholder="First Name"/></td>
  </tr>
  <tr>
    <td>Last Name</td>
    <td><input type="text" name="lname" value="<?php if(isset($_POST['lname'])) echo $_POST['lname']; ?>" class="tr" placeholder="Last Name"/></td>
  </tr>
  <tr>
    <td>Company Name</td>
    <td><input type="text" name="company" value="<?php if(isset($_POST['company'])) echo $_POST['company']; ?>" class="tr" placeholder="Company Name"/></td>
  </tr>
  <tr>
    <td>Position In Company</td>
    <td><input type="text" name="position" value="<?php if(isset($_POST['position'])) echo $_POST['position']; ?>" class="tr" placeholder="Position In Company"/></td>
  </tr>
  <tr>
    <td>Email Address</td>
    <td><input type="text" name="email" value="<?php if(isset($_POST['email'])) echo $_POST['email']; ?>" class="tr"  placeholder="Email Address"/></td>
  </tr>
  <tr>
    <td>Password</td>
    <td><input type="password" name="password" class="tr"  placeholder="Password"/></td>
  </tr>
  <tr>
    <td>Terms & Conditions</td>
    <td><input type="checkbox" name="terms" id="terms"/>&nbsp; I agree to your <a href="">terms and conditions</a>.</td>
  </tr>
  <tr>
    <td></td>
    <td><input type="reset" name="reset" value="Clear" class="submit"/>&nbsp;&nbsp;
    <input type="submit" name="submit" id="submit" value="Registration" class="submit"/>

    </td>
  </tr>
</table>    
</form>

页面：

<?php
ob_start();
require_once("include/config.php");

if(isset($_POST['submit']) && $_POST['submit'] == "Registration")
{
    $title = mysql_real_escape_string($_POST['title']);
    $fname =  $_POST['fname'];
    $lname =  $_POST['lname'];
    $company = $_POST['company'];
    $position = $_POST['position'];
    $email = $_POST['email'];
    $password = $_POST['password'];

    $random_salt = hash('sha512', uniqid(mt_rand(1, mt_getrandmax()), true));
    $pass = hash('sha512', $password.$random_salt); 

    $exitemail = mysql_query("SELECT email FROM members WHERE email = '$email'");
    $numemail = mysql_num_rows($exitemail);

    $err =  array();

    if(isset($title) && isset($fname) && isset($lname) && isset($company) && isset($position) && isset($email) && isset($password))
    {   
        if(empty($title) && empty($fname) && empty($lname) && empty($company) && empty($position) && empty($email) && empty($password))     
            $err[] = "All field require";
        else
        {
            if(empty($title))   
                $err[] = "Your title require";
            if(empty($fname))
                $err[] = "Your first name require";
        }

        // error checking...
        if(!empty($err))
        {
            echo "<div class='error'>"; 
            foreach($err as $er)
            {
                echo "<font color=red>$er.</font><br/>";                
            }
            echo "</div>";
            echo "<br/>";
        }
        else
        {   
            echo "Everything is ok.....";
        }
    }
}
?>

Answer 1

它有很多内容，因此很难为您提供所有代码并按您的方式发送给您。 最好教你在哪里钓鱼，所以如果你打开一个谷歌标签。 按优先顺序：

1. 研究编写存储过程。 它们听起来比它们更可怕，但它们比本质上让每个人都登录到您的数据库要好。 另一种选择是使用像 Laravel 这样的框架。 它们通常会为您提供保护数据安全的方法，而不会像从头开始那样头疼。 不利的一面是，它们迫使您学习如何将您的代码分成一些不会因为它增加复杂性而使您不知所措的东西。 有时，根据您的风格，以艰苦的方式学习会更好。

2.将您的 php 一分为二，就好像您正在为两个完全不同的浏览器编写代码一样。 您现在拥有的一个获取表单信息并以 HTML 响应。 您尚未制作的那个接收表单信息并使用 JSON 进行响应。 这是另一个让人害怕的词，但 JSON 比 HTML 简单得多。 由于您的用户实际上不必查看它，因此您不必担心它的样式。 您不必担心语法，因为 php 有 json_encode() 为您完成那部分。 它所需要的只是常规数组和对象并将它们转换为 JSON。 你的 php 如何知道要发回哪个，HTML 还是 JSON？ 这取决于哪个“浏览器”要求它。 我来解释一下。

将 JavaScript 放入您的表单中，以便在这个 php “处理程序”之间来回通信，正如它所说的那样。 它发送表单（也作为 JSON），并侦听 JSON 作为回报。 它会覆盖您的“提交”按钮并说“您留在此处网页。让我来处理这个。” 这就像在您的巨大而缓慢的浏览器中安装了一个微型浏览器。 当它完成与处理程序的对话后，它决定在所谓的回调函数中如何处理它，该函数通常以红色突出显示内容，显示错误/成功消息，告诉大浏览器起床并移动到另一个页面，等等。这就是他们所说的 AJAX，意思是异步 JavaScript。 这只是说小浏览器能够独立于大浏览器工作的一种奇特方式。

希望这能让你走上正轨。

Answer 2

您可以使用 ajax 来实现这一点：

$(document).on('submit', '#form1', function(e){ // event delegation way to submit
   e.preventDefault(); // stops the form to submit.
   var $this = $(this);
   $.ajax({
       url: $this.attr('action');
       type: $this.attr('method');
       data : $this.serialize(); // sends the data to your php
       success: function(data){
         $('body').append(data); // this will append your error div
       },
       error: function(xhr){
         console.log(xhr.responseText);
       }
   });
}); // end submit.

---

要在表单上显示错误，您必须为此编写一些 css，例如：

.error{
  width:400px;
  height: 300px;
  padding:10px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -150px 0 0 -200px; /* <--to center the div use half of width/height*/
  z-index: 99999; // put this higher to show above all elems on page.
}