如果同一表单页面上的数据已/未存储在数据库中，则显示成功/错误消息

Question

我有一个表单，用户可以从中将数据输入到数据库中，还有一个具有此功能的php文件。 我想使用javascript在同一表单页面上显示警报消息，而不刷新页面。 我对JS不太了解，我已经尝试过遇到的每一种可能的解决方案，但仍找不到解决方案，我在做什么错？我希望有人可以帮助我。

编辑：我决定使用模式进行此操作，但是模式未显示并且PHP文件被打开

编辑2：我可以在屏幕上显示模态，但是它没有消息，甚至没有h4标签中指定的标题

我希望用户看到的消息是PHP文件中的 echo 。

这是我尝试过的：

表单代码：

ffmpeg -layouts

模式：

<form role="form" id="frmUsuario">
                    <div class="row">
                      <div class="col-sm-6 form-group">
                            <label for="name"> ID Usuario:</label>
                            <input type="text" class="form-control" id="IDUsuario" name="txtIDUsuario" readonly>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <label for="name"> Nombre Comercial:</label>
                            <input type="text" class="form-control" id="NombreComercial" name="txtNombreComercial" required>
                        </div>
                        <div class="col-sm-6 form-group">
                            <label for="email"> Nombre del Representante:</label>
                            <input type="text" class="form-control" id="NombreRepresentante" name="txtNombreRepresentante" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 form-group">
                            <label for="message"> Expediente:</label>
                            <textarea style="resize:none" class="form-control" type="textarea" id="Expediente" name="txtExpediente" maxlength="6000" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 form-group">
                            <label for="message"> Observaciones:</label>
                            <textarea style="resize:none" class="form-control" type="textarea" id="Observaciones" name="txtObservaciones" maxlength="6000" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 form-group">
                            <button type="submit" name="btnEnviarUsuario" id="EnviarUsuario" class="btn btn-lg btn-default pull-right" >Enviar &rarr;</button>
                        </div>
                        <div class="col-sm-12 form-group">

                                </div>
                              </form>

表单页面中的JS函数：

    <!-- Modal -->
<div class="modal fade" id="ModalMSJ" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" style="font-weight: bold;" id="exampleModalLabel">Usuario</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="MSJ">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

PHP文件：

    <script type="text/javascript">
$("#frmUsuario").submit(function(e){
    e.preventDefault();
    var btnEnvUsuario="EnviarUsuario"; //name
    $.ajax({
        type : 'POST',
        data: $("#frmUsuario").serialize()+"&btnEnviarUsuario="+btnEnvUsuario,
        url : 'Logica/Usuario.php',
        success : function(data){
            $("#MSJ").html(data);
            $("#ModalMSJ").modal("show");
        }
    });
    return false;
}); 
</script>

Answer 1

只需删除表单标签，它就不会完全刷新页面。

然后从php文件中删除警报，并将其如下所示放置

<script>
$(document).ready(function(){
$("#EnviarUsuario").click(function(){
    $.ajax({
        url: "Logica/Usuario.php",
        type: 'post',
        data: {"btnEnviarUsuario":document.getElementByName("EnviarUsuario").value},

        success: function(result){
           //You put here your alert
           alert("Usuario guardado exitosamente");
        }
    });
});
});
</script>

Answer 2

似乎您在使用引导程序时遇到问题。我使用jsfiddle和伪造的JSON API包装它。你可以试试看。希望对您有所帮助。您在那里只是一个简单的问题。 ，您的代码在ajax数据上是错误的。

看到这个。 https://jsfiddle.net/hp9jzfmo/1/

$(function(){
  $("#frmUsuario").submit(function(e){
      e.preventDefault();
      var btnEnvUsuario=$('#EnviarUsuario').val();
      $.ajax({
          type : 'POST',
          data: $("#frmUsuario").serialize(), // This is the right one
          url : 'https://jsonplaceholder.typicode.com/posts',
          success : function(data){
              $("#MSJ").html(JSON.stringify(data));
              $("#ModalMSJ").modal('show');
          }
      });
      return false;
  }); 
});

身体应该是

<form role="form" id="frmUsuario">
  <div class="row">
    <div class="col-sm-6 form-group">
      <label for="name"> ID Usuario:</label>
      <input type="text" class="form-control" id="IDUsuario" name="txtIDUsuario" readonly>
    </div>
    </div>
    <div class="row">
      <div class="col-sm-6 form-group">
        <label for="name"> Nombre Comercial:</label>
        <input type="text" class="form-control" id="NombreComercial" name="txtNombreComercial" required>
      </div>
      <div class="col-sm-6 form-group">
        <label for="email"> Nombre del Representante:</label>
        <input type="text" class="form-control" id="NombreRepresentante" name="txtNombreRepresentante" required>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 form-group">
        <label for="message"> Expediente:</label>
        <textarea style="resize:none" class="form-control" type="textarea" id="Expediente" name="txtExpediente" maxlength="6000" rows="3"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 form-group">
        <label for="message"> Observaciones:</label>
        <textarea style="resize:none" class="form-control" type="textarea" id="Observaciones" name="txtObservaciones" maxlength="6000" rows="3"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 form-group">
        <button type="submit" name="btnEnviarUsuario" id="EnviarUsuario" class="btn btn-lg btn-default pull-right" >Enviar &rarr;</button>
      </div>
    </div>

</form>
<!-- Modal -->
<div class="modal fade" id="ModalMSJ" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" style="font-weight: bold;" id="exampleModalLabel">Usuario</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="MSJ">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

我认为您可以自行完成PHP部分，只要将数据传递到服务器即可。希望对您有所帮助：）

Answer 3

这是最终的解决方案：

表单代码：

<form role="form" id="frmUsuario">
                <div class="row">
                  <div class="col-sm-6 form-group">
                        <label for="name"> ID Usuario:</label>
                        <input type="text" class="form-control" id="IDUsuario" name="txtIDUsuario" readonly>
                </div>
                <div class="row">
                    <div class="col-sm-6 form-group">
                        <label for="name"> Nombre Comercial:</label>
                        <input type="text" class="form-control" id="NombreComercial" name="txtNombreComercial" required>
                    </div>
                    <div class="col-sm-6 form-group">
                        <label for="email"> Nombre del Representante:</label>
                        <input type="text" class="form-control" id="NombreRepresentante" name="txtNombreRepresentante" required>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 form-group">
                        <label for="message"> Expediente:</label>
                        <textarea style="resize:none" class="form-control" type="textarea" id="Expediente" name="txtExpediente" maxlength="6000" rows="3"></textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 form-group">
                        <label for="message"> Observaciones:</label>
                        <textarea style="resize:none" class="form-control" type="textarea" id="Observaciones" name="txtObservaciones" maxlength="6000" rows="3"></textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 form-group">
                        <button type="submit" name="btnEnviarUsuario" id="EnviarUsuario" class="btn btn-lg btn-default pull-right" >Enviar &rarr;</button>
                    </div>
                    <div class="col-sm-12 form-group">

                            </div>
                          </form>

模式代码

<div class="modal fade" id="ModalMSJ" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                  <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                      <div class="modal-header">
                                        <h4 class="modal-title" style="font-weight: bold; color:black;" id="exampleModalLabel">Usuario</h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                          <span aria-hidden="true">&times;</span>
                                        </button>
                                      </div>
                                      <div class="modal-body" style="color:red;" id="MSJ">
                                      </div>
                                      <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                      </div>
                                    </div>
                                  </div>
                                </div>

JS代码：

    <script type="text/javascript">
$("#frmUsuario").submit(function(e){
    e.preventDefault();
    var btnEnvUsuario="EnviarUsuario"; //variable to check if user clicked the button
    $.ajax({
        type : 'POST',
        data: $("#frmUsuario").serialize()+"&btnEnviarUsuario="+btnEnvUsuario,
        url : 'Logica/Usuario.php',
        success : function(data){
            $("#MSJ").html(data);
            $("#ModalMSJ").modal("show");
        }
    });
    return false;
}); 
</script>

PHP文件代码：

   $IDUsuario=$_POST["txtIDUsuario"];
$NombreRepresentante=$_POST["txtNombreRepresentante"];
$NombreComercial=$_POST["txtNombreComercial"];
$Expediente=$_POST["txtExpediente"];
$Observacion=$_POST["txtObservaciones"];

if(isset($_POST["btnEnviarUsuario"]))
{
   $Conexion = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

    if ($Conexion->connect_error) 
    {
        die("Connection failed: " . $Conexion->connect_error);
    }

    $sql = "insert into usuario
                (NombreRepresentante,NombreComercial,Expediente,Observacion)
                values
                ('$NombreRepresentante','$NombreComercial','$Expediente','$Observacion');";

        if($Conexion->query($sql) === TRUE) { 


        /*Message I'd like to show to user*/

          echo "Usuario guardado exitosamente";
}