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

Question

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

编辑:我决定使用模式来执行此操作，但模式未显示并且 PHP 文件已打开

编辑 2:我让它在屏幕上显示模式，但它没有消息，甚至没有 h4 标签中指定的标题

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

这是我尝试过的:

表单代码:

<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>

模态:

    <!-- 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>

表单页面中的JS函数:

    <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>

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";
}

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>