javascript - ajax 提交的页面上不显示错误

Question

我正在尝试使用 ajax、php、mysql 使表插入新行。到目前为止，我能够制作表格并在字段中正确的数据上提交数据并将数据保存到数据库。

现在我正在尝试进行一些验证并显示错误(如果有)，但我在页面上没有看到错误。我仅在开发人员控制台下看到它们。

这是我在表格上插入的行

<tr id="new_row">
    <td></td>
    <td><input type="text" id="new_name"></td>
    <td><input type="email" id="new_email"></td>
    <td>
         <input type="button" id="insert" value="Insert Row" onclick="insert_row()">
    </td>
</tr>

ajax部分

function insert_row()
{
    var name=document.getElementById("new_name").value;
    var email=document.getElementById("new_email").value;
    $.ajax
    ({
          type:'post',
          url:'insert.php',
          data:{
               insert_row:'insert_row',
               name_val:name,
               email_val:email
          },
          success:function(response) {
               if(response!="")
               {
                   var id=response;
                   var table=document.getElementById("user_table");
                   var table_len=(table.rows.length)-1;
                   var row = table.insertRow(table_len).outerHTML="<tr id='row"+id+"'><td id='name:"+id+"'>"+name+"</td><td id='email:"+id+"'>"+email+"</td>";

                   document.getElementById("new_name").value="";
                   document.getElementById("new_email").value="";
               }
          }

    });
}

和PHP部分insert.php

if (isset($_POST['insert_row'])) {

     $name=$_POST['name_val'];
     $email=$_POST['email_val'];

     if($name < 4) { echo 'please enter the name';exit(); }
     if($email < 4) { echo 'please enter email';exit(); }

    $value = $pdo->prepare('SELECT * FROM client WHERE name= ?');
    $value->bindParam(1, $name, PDO::PARAM_STR);
    $value->execute();
    $result = $value->fetch();


    $value1 = $pdo->prepare('SELECT * FROM client WHERE email= ?');
    $value1->bindParam(1, $email, PDO::PARAM_STR);
    $value1->execute();
    $result1 = $value1->fetch();

    if ($result > 0) 
    {
        echo 'Name already exist';
        exit();
    }
    elseif ($result1 > 0) 
    {
        echo 'Email already exist';
        exit();
    }       
    else
    {
          // query for insert here

我在页面上没有看到任何错误。你能告诉我如何通过它们吗？

Answer 1

例如，您可以在此处添加一个 div:

<td>
      <input type="button" id="insert" value="Insert Row" onclick="insert_row()">
       <div id="error" style="display:none"></div>
</td>

在你的ajax中:

    success:function(response) {
                       if(response!="")
                       {
                           var id=response;
                           var table=document.getElementById("user_table");
                           var table_len=(table.rows.length)-1;
                           var row = table.insertRow(table_len).outerHTML="<tr id='row"+id+"'><td id='name:"+id+"'>"+name+"</td><td id='email:"+id+"'>"+email+"</td>";

                           document.getElementById("new_name").value="";
                           document.getElementById("new_email").value="";
                          //just in case the error has been shown before
                           $('#error').hide()
                       }else{

                       $('#error').html(response);
                       $('#error').show()
                  }

我希望这能让你继续下去。