javascript - 如果数据曾经/未存储在同一表单页面的数据库中,则显示成功/错误消息
问题描述
我有一个表单,用户将数据输入到数据库中,还有一个带有执行此操作的函数的 php 文件。我想使用 javascript 在同一个表单页面上显示一条警报消息,而无需刷新页面。我对JS不太了解,我已经尝试了所有可能的解决方案,但我还找不到解决方案,我做错了什么?我希望有人能帮助我。
编辑:我决定使用模态来执行此操作,但没有显示模态并且 PHP 文件被打开
编辑 2:我让它在屏幕上显示模式,但它没有消息,甚至没有在 h4 标签中指定的标题
我希望用户看到的消息是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 →</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">×</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";
}
解决方案
只需删除表单标签,它不会完全刷新页面。
然后从 php 文件中删除你的 alert 并把它如下所示
<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>
推荐阅读
- ssl - Kafka 代理间 SSL 握手失败
- xcode - 应用启动时拨打特定号码
- javascript - 如何测试数组是否包含数组?(笑话)
- angular - 如何在 Angular 7 FormGroup valueChanges 中删除多个订阅列表中的特定订阅?
- reactjs - 如果我将 {key} 设置为 null,React 是否应该删除组件?
- java - 在镜像运行时初始化或重新初始化的类的镜像堆中不允许有实例:sun.security.provider.NativePRNG
- reactjs - Spring boot 和 React JS:未捕获(承诺中)错误:请求失败,状态码 404
- svn - 在 svn 命令中使用 sed 会忽略目录反斜杠
- node.js - 为什么 valueChanges 在我的代码中不起作用?
- php - Laravel 集合:flatten 方法被忽略