Se realizará con los mensajes de error personalizados, y otras cosas más.
Pasos:
1.- Nos creamos las carpetas css, lib, img2.- Descargamos la libreria jQuery y el Bootstrap y lo ponemos en la carpeta lib
3.- Descargamos una imagen para el loading (para mostrar el mensaje cargando...) y el otro para mostrar en el contenido (en la parte inferior estan las imagenes)
4.- Creamos un archivo index.php, ajax-load.php, style.css
- En el index.php
En el index.php va este contenido
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ejemplo de AJAX usando el framework jQuery</title>
<link rel="shortcut icon" href="http://wimarbueno.com/favicon.ico?1904201303" type="image/vnd.microsoft.icon" />
<meta name="description" content="Desarrollo de AJAX usando el Framework jQuery y Bootstrap, PHP, CSS" />
<meta name="keywords" content="jQuery, AJAX, JavaScript, PHP, CSS, Bootstrap" />
<link rel="stylesheet" href="http://tutoriales.wimarbueno.com/framework/jquery/ajax/lib/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://tutoriales.wimarbueno.com/framework/jquery/ajax/css/style.css?1904201303" />
</head>
<body>
<div id="page-wrapper"><!--Page wrapper-->
<div id="page"><!--Page-->
<div id="header"><!--Header-->
<header><!--Header-->
<div class="section clearfix"><!--Section-->
<h1>Ejemplo de AJAX con PHP, CSS, usando el framework jQuery y Bootstrap</h1>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">jQuery AJAX</a>
<ul class="nav nav-pills">
<li class="active"><a href="http://tutoriales.wimarbueno.com/framework/jquery/ajax/">Inicio</a></li>
<li><a href="http://wimarbueno.com" title="WiMarBueno.com" target="_blank">Web</a></li>
<li><a target="_blank" rel="nofollow" title="WiMarBueno blogspot" href="http://wimarbueno.blogspot.com">Blog</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Mis redes sociales<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a target="_blank" rel="nofollow" title="WiMarBueno Google Plus" href="https://plus.google.com/100732630291224994703">Google</a></li>
<li><a target="_blank" rel="nofollow" title="WiMarBuenoPeru Facebook " href="https://www.facebook.com/WiMarBuenoPeru">Facebook</a></li>
<li><a target="_blank" rel="nofollow" title="WiMarBueno LinkedIn" href="http://pe.linkedin.com/in/wimarbueno">LinkedIn</a></li>
<li><a target="_blank" rel="nofollow" title="WiMarBueno Twitter" href="http://twitter.com/wimarbueno">Twitter</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div><!-- /Section-->
</header><!-- /Header-->
</div><!--Header-->
<div id="main-wrapper"><!--Main wrapper-->
<div id="main" class="clearfix"><!--Main-->
<div id="sidebar-first" class="column sidebar"><!--Sidebar first-->
<div class="section"><!--Section-->
<div class="block">
<p>
Este es un ejemplo de ajax usando las librerías:
</p>
<ol>
<li>Framework jQuery (para AJAX)</li>
<li>Framework Bootstrap (para efectos de menu, el CSS)</li>
</ol>
</div>
</div><!-- /Section-->
</div><!-- /Sidebar first-->
<div id="content" class="column"><!--Content-->
<div class="section"><!--Section-->
<div class="block">
<input type="button" name="mostrar" id="mostrar" value="Mostrar" class="btn btn-primary"/>
</div>
<div class="block">
<div class="msg"></div>
<div id="ajax-cont"></div>
</div>
</div><!-- /Section-->
</div><!-- /Content-->
</div><!-- /Main-->
</div><!-- /Main wrapper-->
<div id="footer-wrapper"><!--Footer wrapper-->
<div class="section clearfix"><!--Section-->
<p>Desarrollado por <a href="http://wimarbueno.com/" target="_blank" title="WiMarBueno.com">WiMarBueno.com</a> ;) 2013</p>
</div><!-- /Section-->
</div><!--Footer wrapper-->
</div><!-- /Page-->
</div><!-- /Page wrapper-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://tutoriales.wimarbueno.com/framework/jquery/ajax/lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
BASE_URL = 'http://tutoriales.wimarbueno.com/framework/jquery/ajax/';
WMB_CID = '?1904201303';
jQuery(document).ready(function($) {
$("#mostrar").click(function() {//inicio click
$.ajax({
url: BASE_URL + 'ajax-load.php?' + WMB_CID,
type: 'get',
cache: false,
dataType: 'html',
beforeSend: function() {
$('#ajax-cont').html("<div class='loading'></div>")
},
success: function(response) {
$('#ajax-cont').html('')
$('#ajax-cont').fadeOut("slow").html(response).fadeIn("slow");
},
error: function(jqXHR, exception) {
if (jqXHR.status === 0) {
$('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Not connect. Verify Network.</div>')
} else if (jqXHR.status == 400) {
$('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Server understood the request but request content was invalid. [400].</div>')
} else if (jqXHR.status == 401) {
$('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Unauthorised access. [401].</div>')
} else if (jqXHR.status == 403) {
$('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Forbidden resouce can"t be accessed. [403].</div>')
} else if (jqXHR.status == 404) {
$('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Requested page not found. [404].' + jqXHR.status + '</div>')
} else if (jqXHR.status == 500) {
$('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Internal Server Error. [500].</div>')
} else if (jqXHR.status == 503) {
$('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Service Unavailable. [503].</div>')
} else if (exception === 'parsererror') {
$('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Requested JSON parse failed.</div>')
} else if (exception === 'timeout') {
$('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Time out error.</div>')
} else if (exception === 'abort') {
$('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Ajax request aborted.</div>')
} else {
$('#ajax-cont').html('<div class="alert alert-error"><button data-dismiss="alert" class="close" type="button">×</button><strong>Error!</strong> Uncaught Error. ' + jqXHR.responseText + '</div>')
}
}
}); //fin ajax
})//fin click
})
</script>
</body>
</html>
- En el ajax-load.php
En el ajax-load.php va este contenido
<img src="img/wimarbueno.png" alt="WiMarBueno" />
- En el style.css
En el style.css va este conteido y debe estar en la carpeta css
/*----------------------------- Tools -------------------------------------*/
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.loading{background: url("../img/loading.gif"); display: block;width: 300px;height: 300px;position: fixed;left: 50%;top: 50%;margin-left: -150px;margin-top: -150px;z-index: 99;}
/*----------------------------- Layout -------------------------------------*/
#page-wrapper,
#page,
#header,
#main-wrapper,
#footer-wrapper{display: block;width: 100%;height: 100%;}
#header .section,
#main-wrapper #main,
#footer-wrapper .section{display: block;width: 960px;position: relative;margin: 0 auto;}
#sidebar-first,
#sidebar-second,
#content{display: inline;float: left;position: relative;}
#sidebar-first,
#sidebar-second {
width: 24%;
}
#content{width: 76%;}
#content .section,
.sidebar .section {
padding: 10px;box-shadow: 0 0 3px #BBD8E9 inset;
}
#content .section{margin-left: 5px;}
#content .section .block,
.sidebar .section .block{
margin-bottom: 10px;
}
/*------------*/
#footer-wrapper{padding-top: 20px;}
/*Screen*/
@media only screen and (min-width: 10px) and (max-width: 960px){
#header .section,
#main-wrapper #main,
#footer-wrapper .section{width: 95%;}
}
@media only screen and (min-width: 10px) and (max-width: 600px){
#sidebar-first,
#sidebar-second,
#content{width: 100%;clear: both;}
#content .section{margin-left: 0;margin-top: 5px;}
}
-----------------------------------------------------------------------Si deseas verlo en YouTube.
Descarga: en proceso
