Javascript 如果数据是/不是'，则显示成功/错误消息；t存储在同一表单页上的数据库中

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

Edit：我决定使用modals来执行此操作，但是modal没有显示，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>

---

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

然后从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>

$（文档）.ready（函数（）{
$（“#环境”）。单击（函数（）{
$.ajax({
url:“Logica/Usuario.php”，
键入：“post”，
数据：{“btnEnviarUsuario”：document.getElementByName（“envirauario”）.value}，
成功：功能（结果）{
//你把警报放在这里
警报（“Usuario guardado exitosamente”）；
}
});
});
});

似乎您在使用引导时遇到了问题。我使用JSFIDLE和伪JSON API包装它。你可以试试。我希望它能有所帮助。你的问题很简单，您的代码在ajax数据上是错误的

看这个。

尸体应该是

身份证号码：
名义商业：
代表名称：
权宜之计：
观察者：
Enviar&rarr；
乌萨里奥
&时代；
接近
保存更改

---

PHP部分我认为您可以自己做，只要数据传递到服务器。我希望它有帮助：）

这是最终的解决方案：

表格代码：

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

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

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

---

我认为你可以考虑使用自举模式，并用引导程序显示模态，使模态隐藏，并显示模态并在其成功时填充模态。有关参考资料，请参阅。在成功的时候，你也可以不打印就直接发出警报，或者把页面放在成功功能上。我知道你在做什么，你真的走在正确的轨道上了。考虑到这一点，在互联网上发送内容要花钱。数据越多，钱就越多。我这样说是为了说明，在加载第一页之后发送java脚本已经成为一种不好的做法。完全可以在页面加载后加载新的JS文件，或者在会话中加载新的JS文件，但是这样做的方法应该在第一次请求时加载。此外，您使用的选择器可能无法在较旧的浏览器上工作。我建议只使用字母数字字符。谢谢你的回复，我会尝试一下并让你知道。@BenyaminLimanto我决定按照你的建议使用情态动词。我编辑了我的问题，因为模态没有显示，PHP文件执行…你能帮我吗？谢谢。如果我想从Usuario.php中的echo获取成功警报，而不是自己编写呢？使用AJAX，php脚本在后台执行，因此您不会看到它的输出。最好是让php脚本打印JSON，并在JS的success函数中用JavaScript解析它AJAX@ErrolChavesMoya或者PHP可以回显纯文本或HTML，然后您可以将其显示在页面中某个元素中。您不能做的是您的PHP在原始问题中所做的事情，也就是吐出一个

标记-它不会被执行。同样，您不需要执行它，因为您的响应会返回到JS代码中，所以您可以在那时执行任何您想要的操作。只需让PHP回显您想要显示的消息，然后JS就可以捕获该消息并将其放到您的页面上。您是对的。问题似乎在于我通过ajax传递变量的方式。我让它在屏幕上显示模式，但它没有消息，甚至没有在什么可能是错误的标题中指定的标题？我更新了JS代码。谢谢你的帮助help@ErrolChavesMoyaPHP没有错误吗？您是否尝试使用web浏览器上的开发工具？在模式出现在屏幕上后，我注意到一些奇怪的情况：按钮文本颜色为白色，我想‘如果模式标题和正文文本也为白色会怎么样？’因此我尝试在模式上选择一些文本，正如我所想，消息始终存在。但是我看不到它，因为文本和模式窗口的颜色是白色的哈哈。无论如何，非常感谢你对情态动词使用的建议，我学到了一些新的东西，最后，这比我最初的理想要容易得多。谢谢你的帮助，我真的很感激。不客气。很高兴看到其他人能解决这个问题。

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

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

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