Problemas com Nomes com carcteres especiais no JS Ajax

4 respostas
ajax
natangutz

Olá Galera, Estou me deparando com uma dificuldade de um código, onde esto quando coloco um nome com acentuação, como por exemplo “Adão” quando ele é exibido pelo código ele exite por “Adão”. Estou usando JS Ajax, queria ver o que poderiam me orientar para resolver a situação. Estou tentando alterar para UTF-8 mas não estou conseguindo fazer.

  • Peguei o código na internet estou tentando alterar para o que preciso.

Caso precisem envio o código via e-mail

4 Respostas

Guiabcti

Tentar colocar um meta dentro da tag head do seu html, assim: <meta charset="utf-8">

natangutz

ja possui essa meta…

Código Wolf

DataTables - Ajax - PHP - MySql / MariaDB

<div class="row">
	<div id="cuadro2" class="col-sm-12 col-md-12 col-lg-12 ocultar">
		<form class="form-horizontal" action="" method="POST">
			<div class="form-group">
				<h3 class="col-sm-offset-2 col-sm-8 text-center">					
				Formulario de Registro de Usuarios</h3>
			</div>
			<input type="hidden" id="idusuario" name="idusuario" value="0">
			<input type="hidden" id="opcion" name="opcion" value="registrar">
			<div class="form-group">
				<label for="nombre" class="col-sm-2 control-label">Nombres</label>
				<div class="col-sm-8"><input id="nombre" name="nombre" type="text" class="form-control"  autofocus></div>				
			</div>
			<div class="form-group">
				<label for="apellidos" class="col-sm-2 control-label">Apellidos</label>
				<div class="col-sm-8"><input id="apellidos" name="apellidos" type="text" class="form-control" ></div>
			</div>
			<div class="form-group">
				<label for="apellidos" class="col-sm-2 control-label">Dni</label>
				<div class="col-sm-8"><input id="dni" name="dni" type="text" class="form-control" maxlength="8" ></div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<input id="" type="submit" class="btn btn-primary" value="Guardar">
					<input id="btn_listar" type="button" class="btn btn-primary" value="Listar">
				</div>
			</div>
		</form>
		<div class="col-sm-offset-2 col-sm-8">
			<p class="mensaje"></p>
		</div>
		
	</div>
</div>
<div class="row">
	<div id="cuadro1" class="col-sm-12 col-md-12 col-lg-12">
		<div class="col-sm-offset-2 col-sm-8">
			<h3 class="text-center"> <small class="mensaje"></small></h3>
		</div>
		<div class="table-responsive col-sm-12">		
			<table id="dt_cliente" class="table table-bordered table-hover" cellspacing="0" width="100%">
				<thead>
					<tr>								
						<th>Nombre</th>
						<th>Apellidos</th>
						<th>Dni</th>
						<th></th>											
					</tr>
				</thead>					
			</table>
		</div>			
	</div>		
</div>
<div>
	<form id="frmEliminarUsuario" action="" method="POST">
		<input type="hidden" id="idusuario" name="idusuario" value="">
		<input type="hidden" id="opcion" name="opcion" value="eliminar">
		<!-- Modal -->
		<div class="modal fade" id="modalEliminar" tabindex="-1" role="dialog" aria-labelledby="modalEliminarLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="modalEliminarLabel">Eliminar Usuario</h4>
					</div>
					<div class="modal-body">							
						¿Está seguro de eliminar al usuario?<strong data-name=""></strong>
					</div>
					<div class="modal-footer">
						<button type="button" id="eliminar-usuario" class="btn btn-primary" data-dismiss="modal">Aceptar</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
					</div>
				</div>
			</div>
		</div>
		<!-- Modal -->
	</form>
</div>

<script src="js/jquery-1.12.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.js"></script>
<!--botones DataTables-->	
<script src="js/dataTables.buttons.min.js"></script>
<script src="js/buttons.bootstrap.min.js"></script>
<!--Libreria para exportar Excel-->
<script src="js/jszip.min.js"></script>
<!--Librerias para exportar PDF-->
<script src="js/pdfmake.min.js"></script>
<script src="js/vfs_fonts.js"></script>
<!--Librerias para botones de exportación-->
<script src="js/buttons.html5.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/ajax.js" [b]charset="ISO-8859-1"[/b]></script>

<script>		
	$(document).on("ready", function(){
		listar();
		guardar();
		eliminar();
	});

	$("#btn_listar").on("click", function(){
		listar();
	});

	var guardar = function(){
		$("form").on("submit", function(e){
			e.preventDefault();
			var frm = $(this).serialize();
			$.ajax({
				method: "POST",
				url: "guardar.php",
				data: frm
			}).done( function( info ){
			console.log( info );		
				var json_info = JSON.parse( info );
				mostrar_mensaje( json_info );
				limpiar_datos();
				listar();
			});
		});
	}

	var eliminar = function(){
		$("#eliminar-usuario").on("click", function(){
			var idusuario = $("#frmEliminarUsuario #idusuario").val(),
				opcion = $("#frmEliminarUsuario #opcion").val();
			$.ajax({
				method:"POST",
				url: "guardar.php",
				data: {"idusuario": idusuario, "opcion": opcion}
			}).done( function( info ){
				var json_info = JSON.parse( info );
				mostrar_mensaje( json_info );
				limpiar_datos();
				listar();
			});
		});
	}

	var mostrar_mensaje = function( informacion ){
		var texto = "", color = "";
		if( informacion.respuesta == "BIEN" ){
				texto = "<strong>Bien!</strong> Se han guardado los cambios correctamente.";
				color = "#379911";
		}else if( informacion.respuesta == "ERROR"){
				texto = "<strong>Error</strong>, no se ejecutó la consulta.";
				color = "#C9302C";
		}else if( informacion.respuesta == "EXISTE" ){
				texto = "<strong>Información!</strong> el usuario ya existe.";
				color = "#5b94c5";
		}else if( informacion.respuesta == "VACIO" ){
				texto = "<strong>Advertencia!</strong> debe llenar todos los campos solicitados.";
				color = "#ddb11d";
		}else if( informacion.respuesta == "OPCION_VACIA" ){
				texto = "<strong>Advertencia!</strong> la opción no existe o esta vacia, recargar la página.";
				color = "#ddb11d";
		}

		$(".mensaje").html( texto ).css({"color": color });
		$(".mensaje").fadeOut(5000, function(){
				$(this).html("");
				$(this).fadeIn(3000);
		});			
	}

	var limpiar_datos = function(){
		$("#opcion").val("registrar");
		$("#idusuario").val("");
		$("#nombre").val("").focus();
		$("#apellidos").val("");
		$("#dni").val("");
	}

	var listar = function(){
			$("#cuadro2").slideUp("slow");
			$("#cuadro1").slideDown("slow");
		var table = $("#dt_cliente").DataTable({
			"destroy":true,
			"ajax":{
				"method":"POST",
				"url": "listar.php"
			},
			"columns":[
				{"data":"nombre"},
				{"data":"apellidos"},
				{"data":"dni"},
				{"defaultContent": "<button type='button' class='editar btn btn-primary'><i class='fa fa-pencil-square-o'></i></button>	<button type='button' class='eliminar btn btn-danger' data-toggle='modal' data-target='#modalEliminar' ><i class='fa fa-trash-o'></i></button>"}	
			],
			"language": idioma_espanol,
			"dom": "<'row'<'form-inline' <'col-sm-offset-5'B>>>"
				 +"<'row' <'form-inline' <'col-sm-1'f>>>"
				 +"<rt>"
				 +"<'row'<'form-inline'"
				 +" <'col-sm-6 col-md-6 col-lg-6'l>"
				 +"<'col-sm-6 col-md-6 col-lg-6'p>>>",//'Bfrtip',
			"buttons":[
				{ 
					"text": "<i class='fa fa-user-plus'></i>",
					"titleAttr": "Agregar Usuario",
					"className": "btn btn-success",
					"action": function(){
						agregar_nuevo_usuario();
					}
				},
				 {
	                extend:    'excelHtml5',
	                text:      '<i class="fa fa-file-excel-o"></i>',
	                titleAttr: 'Excel'
	            },
	            {
	                extend:    'csvHtml5',
	                text:      '<i class="fa fa-file-text-o"></i>',
	                titleAttr: 'CSV'
	            },
	            {
	                extend:    'pdfHtml5',
	                text:      '<i class="fa fa-file-pdf-o"></i>',
	                titleAttr: 'PDF'
	            }
			]
		});

		obtener_data_editar("#dt_cliente tbody", table);
		obtener_id_eliminar("#dt_cliente tbody", table);
	}

	var agregar_nuevo_usuario = function(){
		limpiar_datos();
		$("#cuadro2").slideDown("slow");
		$("#cuadro1").slideUp("slow");
	}

	var obtener_data_editar = function(tbody, table){
		$(tbody).on("click", "button.editar", function(){
			var data = table.row( $(this).parents("tr") ).data();
			var idusuario = $("#idusuario").val( data.idusuario ),
					nombre = $("#nombre").val( data.nombre ),
					apellidos = $("#apellidos").val( data.apellidos ),
					dni = $("#dni").val( data.dni ),
					opcion = $("#opcion").val("modificar");

					$("#cuadro2").slideDown("slow");
					$("#cuadro1").slideUp("slow");
		});
	}

	var obtener_id_eliminar = function(tbody, table){
		$(tbody).on("click", "button.eliminar", function(){
			var data = table.row( $(this).parents("tr") ).data();
			var idusuario = $("#frmEliminarUsuario #idusuario").val( data.idusuario );
		});
	}

	var idioma_espanol = {
	    "sProcessing":     "Procesando...",
	    "sLengthMenu":     "Mostrar _MENU_ registros",
	    "sZeroRecords":    "No se encontraron resultados",
	    "sEmptyTable":     "Ningún dato disponible en esta tabla",
	    "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
	    "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
	    "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
	    "sInfoPostFix":    "",
	    "sSearch":         "Buscar:",
	    "sUrl":            "",
	    "sInfoThousands":  ",",
	    "sLoadingRecords": "Cargando...",
	    "oPaginate": {
	        "sFirst":    "Primero",
	        "sLast":     "Último",
	        "sNext":     "Siguiente",
	        "sPrevious": "Anterior"
	    },
	    "oAria": {
	        "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
	        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
	    }
	}
	

</script>
Guiabcti

Tem como você postar o código, pois não encontrei o meta neste trecho de código;

Fabio_Dos_Reis
Veja se no banco de dados está com o encode quebrado, coloque isso quando for gravar os dados:

$.ajax({

type : POST,

url : ?,									

contentType : application/x-www-form-urlencoded;charset=UTF-8,										

success : function(data) {
}
	});
});
Criado 5 de junho de 2019
Ultima resposta 6 de jun. de 2019
Respostas 4
Participantes 3