API tools faq
paste
Advertisement
Guest User

HTML/AJAX

a guest
Oct 1st, 2017
172
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.92 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3. To change this license header, choose License Headers in Project Properties.
  4. To change this template file, choose Tools | Templates
  5. and open the template in the editor.
  6. -->
  7. <html>
  8.  
  9. <title>Carrito de la compra</title>
  10. <meta charset="UTF-8">
  11. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  13. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  14. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  15. <link href="div.css" rel="stylesheet" type="text/css"/>
  16. <script src="forge-sha256.min.js" type="text/javascript"></script>
  17. <style>
  18. #teveo, #fueraForm{
  19. visibility: hidden;
  20. }
  21. input{
  22. margin: 0 20px 0 9px;
  23. }
  24. form{
  25. margin: 20px 0 20px 0;
  26. }
  27. #elh2{
  28. display: inline-block;
  29. }
  30. #logout{
  31. margin: 0 0 12px 15px;
  32. }
  33. img{
  34. width: 350px !important;
  35. height: 260px !important;
  36. }
  37. th{
  38. width: 320px;
  39. padding: 10px 10px 10px 10px;
  40. }
  41. table{
  42. margin: 30px 0 30px 0 ;
  43. background-color: lightgrey;
  44. }
  45. tr{
  46. padding: 30px 0 30px 0;
  47. }
  48. input.form-control.text-center{
  49. margin: 0 0 0 0;
  50. height: 22px;
  51. }
  52. b{
  53. background-color: rgba(53, 132, 20, 0.71) !important;
  54. }
  55. .row{
  56. margin-top: 50px;
  57. margin-bottom: 15px;
  58. }
  59. </style>
  60.  
  61. <body>
  62.  
  63. <div class="container">
  64. <div class="col-lg-12">
  65.  
  66. <div class="page-header">
  67. <h1>Venta de CDs</h1>
  68. </div>
  69.  
  70. <div id="adios"></div>
  71.  
  72. <!-- FORMULARIO LOGIN-->
  73. <form id="fueraForm" class="form-inline">
  74. <div class="form-group">
  75. <label for="user">User:</label>
  76. <input type="text" class="form-control" id="user" name="user" placeholder="Usuario...">
  77. </div>
  78.  
  79. <div class="form-group">
  80. <label for="pass">Password:</label>
  81. <input type="password" class="form-control" id="pass" name="pass" placeholder="Password...">
  82. </div>
  83. <button id="loguear" type="submit" class="btn btn-primary">Logueate</button>
  84. </form>
  85.  
  86. <div id="hash"></div>
  87. <div id="errores"></div>
  88.  
  89.  
  90. <div id="teveo" class="container" style="margin-top:50px;">
  91. <span id="elh2"></span>
  92. <button id="logout" type="submit" class="btn btn-primary">Logout</button>
  93. <div class="row">
  94.  
  95.  
  96. <!-------------------------art1---------------------->
  97. <div class="col-xs-12 col-sm-6 col-md-3">
  98. <div class="col-item">
  99. <div class="post-img-content">
  100. <img id="img1" class="img-responsive" alt="a" />
  101. <span class="post-title">
  102. <b>Stock: </b>
  103. <b id="stock1"></b><br>
  104. </span>
  105. </div>
  106. <div class="info">
  107. <div class="row">
  108. <div class="price col-md-6">
  109. <h5 id="nombre1"></h5>
  110. <h5 class="price-text-color">Precio: </h5>
  111. <h5 id="precio1" class="price-text-color"></h5>
  112. <h5 id="sinstock1"></h5>
  113. </div>
  114.  
  115. </div>
  116. <div class="separator clear-left">
  117. <p class="btn-add">
  118. <i class="fa fa-shopping-cart"></i><button id="boton1">Add to cart</button></p>
  119. <p class="btn-details">
  120. <input type="number" id="inp1" class="form-control text-center" value="1"></p>
  121. </div>
  122. <div class="clearfix">
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127.  
  128. <!--------------------------art2------------------------->
  129. <div class="col-xs-12 col-sm-6 col-md-3">
  130. <div class="col-item">
  131. <div class="post-img-content">
  132. <img id="img2" class="img-responsive" alt="a" />
  133. <span class="post-title">
  134. <b>Stock: </b>
  135. <b id="stock2"></b><br>
  136. </span>
  137. </div>
  138. <div class="info">
  139. <div class="row">
  140. <div class="price col-md-6">
  141. <h5 id="nombre2"></h5>
  142. <h5 class="price-text-color">Precio: </h5>
  143. <h5 id="precio2" class="price-text-color"></h5>
  144. <h5 id="sinstock2"></h5>
  145. </div>
  146.  
  147. </div>
  148. <div class="separator clear-left">
  149. <p class="btn-add">
  150. <i class="fa fa-shopping-cart"></i><button id="boton2">Add to cart</button></p>
  151. <p class="btn-details">
  152. <input type="number" id="inp2" class="form-control text-center" value="1"></p>
  153. </div>
  154. <div class="clearfix">
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159.  
  160. <!-------------------------art3------------------------->
  161. <div class="col-xs-12 col-sm-6 col-md-3">
  162. <div class="col-item">
  163. <div class="post-img-content">
  164. <img id="img3" class="img-responsive" alt="a" />
  165. <span class="post-title">
  166. <b>Stock: </b>
  167. <b id="stock3"></b><br>
  168. </span>
  169. </div>
  170. <div class="info">
  171. <div class="row">
  172. <div class="price col-md-6">
  173. <h5 id="nombre3"></h5>
  174. <h5 class="price-text-color">Precio: </h5>
  175. <h5 id="precio3" class="price-text-color"></h5>
  176. <h5 id="sinstock3"></h5>
  177. </div>
  178.  
  179. </div>
  180. <div class="separator clear-left">
  181. <p class="btn-add">
  182. <i class="fa fa-shopping-cart"></i><button id="boton3">Add to cart</button></p>
  183. <p class="btn-details">
  184. <input type="number" id="inp3" class="form-control text-center" value="1"></p>
  185. </div>
  186. <div class="clearfix">
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191.  
  192. <!--------------------------art4------------------------>
  193. <div class="col-xs-12 col-sm-6 col-md-3">
  194. <div class="col-item">
  195. <div class="post-img-content">
  196. <img id="img4" class="img-responsive" alt="a" />
  197. <span class="post-title">
  198. <b>Stock: </b>
  199. <b id="stock4"></b><br>
  200. </span>
  201. </div>
  202. <div class="info">
  203. <div class="row">
  204. <div class="price col-md-6">
  205. <h5 id="nombre4"></h5>
  206. <h5 class="price-text-color">Precio: </h5>
  207. <h5 id="precio4" class="price-text-color"></h5>
  208. <h5 id="sinstock4"></h5>
  209. </div>
  210.  
  211. </div>
  212. <div class="separator clear-left">
  213. <p class="btn-add">
  214. <i class="fa fa-shopping-cart"></i><button id="boton4">Add to cart</button></p>
  215. <p class="btn-details">
  216. <input type="number" id="inp4" class="form-control text-center" value="1"></p>
  217. </div>
  218. <div class="clearfix">
  219. </div>
  220. </div>
  221. </div>
  222. </div>
  223.  
  224. </div>
  225.  
  226.  
  227.  
  228. <table class="table table-striped table-hover table-bordered">
  229. <tbody>
  230. <tr>
  231. <th>CD</th>
  232. <th>Cantidad</th>
  233. <th>Precio</th>
  234. <th>Precio Total</th>
  235. </tr>
  236. <tr>
  237. <td id="cart1">
  238. <!--<button type="button" class="btn btn-default btn-xs">
  239. <span class="glyphicon glyphicon-remove"></span>
  240. </button>-->
  241. </td>
  242. <td id="qty1"></td>
  243. <td id="price1"></td>
  244. <td id="price_sub1"></td>
  245.  
  246. </tr>
  247. <tr>
  248. <td id="cart2"></td>
  249. <td id="qty2"></td>
  250. <td id="price2"></td>
  251. <td id="price_sub2"></td>
  252. </tr>
  253. <tr>
  254. <td id="cart3"></td>
  255. <td id="qty3"></td>
  256. <td id="price3"></td>
  257. <td id="price_sub3"></td>
  258. </tr>
  259. <tr>
  260. <td id="cart4"></td>
  261. <td id="qty4"></td>
  262. <td id="price4"></td>
  263. <td id="price_sub4"></td>
  264. </tr>
  265. <tr>
  266. <th colspan="3"><span class="pull-right">Total</span></th>
  267. <th id="total"></th>
  268. </tr>
  269. <tr>
  270. <td>
  271. <a href="#" class="btn btn-primary" data-dismiss="modal" id="vaciarCarr">Vaciar carrito</a>
  272. <div id="errVaciar"></div>
  273. </td>
  274. <td colspan="3"><a href="javascript:void(0)" id="checkout" class="pull-right btn btn-success">Checkout</a></td>
  275. </tr>
  276.  
  277.  
  278. </tbody>
  279. </table>
  280.  
  281.  
  282.  
  283.  
  284. </div>
  285. </div>
  286. </div>
  287.  
  288.  
  289.  
  290.  
  291. <script>
  292. function inicio() {
  293. $("#pass").keyup(manejoTecla);
  294. }
  295. function manejoTecla() {
  296. pass = $("#pass").val();
  297. epass = forge_sha256(pass);
  298. $("#hash").empty().append(epass);
  299. }
  300. $(document).ready(function () {
  301. $("#pass").keyup(function () {
  302. $("#hash").empty().append(forge_sha256($("#pass").val()));
  303. });
  304. $.ajax({
  305. url: 'http://localhost:8084/mavenCarrito/session?ob=usuario&op=check',
  306. type: 'GET',
  307. xhrFields: {
  308. withCredentials: true
  309. },
  310. datatype: 'json',
  311. success: function (data) {
  312. //si existe una sesion, se esconde el formulario de login.
  313. if (data.user != null) {
  314. visualizarSesion();
  315. $("#elh2").empty().append("<h2>Bienvenido: " + data.user + "!</h2>");
  316. $.ajax({
  317. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list',
  318. type: 'GET',
  319. xhrFields: {
  320. withCredentials: true
  321. },
  322. datatype: 'json',
  323. success: function (data) {
  324. for (i = 0; i < data.length; i++) {
  325. $("#nombre" + (i + 1)).append(data[i].nombre);
  326. $("#precio" + (i + 1)).append(data[i].precio);
  327. $("#stock" + (i + 1)).append(data[i].existencias);
  328. $("#img" + (i + 1)).attr("src", data[i].url);
  329. }
  330. }
  331. });
  332. $.ajax({
  333. url: 'http://localhost:8084/mavenCarrito/session?ob=carrito&op=list',
  334. type: 'GET',
  335. xhrFields: {
  336. withCredentials: true
  337. },
  338. datatype: 'json',
  339. success: function (data) {
  340. for (i = 0; i < data.length; i++) {
  341. $("#cart" + (i + 1)).empty().html(data[i].nombre);
  342. $("#qty" + (i + 1)).empty().append(data[i].existencias);
  343. $("#price" + (i + 1)).empty().append(data[i].precio);
  344. $("#price_sub" + (i + 1)).empty().append((data[i].existencias) * (data[i].precio));
  345. }
  346. }
  347. });
  348. } else {
  349. visualizarLogin();
  350. }
  351. },
  352. error: function () {
  353. $("#errores").html("<p>Error.</p>");
  354. }
  355. });
  356. $("#loguear").click(function () {
  357. event.preventDefault();
  358. nomUser = $("#user").val();
  359. //nomPass = $("#pass").val();
  360. nomPass = forge_sha256($("#pass").val());
  361. $.ajax({
  362. url: 'http://localhost:8084/mavenCarrito/session?ob=usuario&op=login&user=' + nomUser + '&pass=' + nomPass,
  363. type: 'POST',
  364. xhrFields: {
  365. withCredentials: true
  366. },
  367. datatype: 'json',
  368. success: function (data) {
  369. if (data.status == 200) {
  370. visualizarSesion();
  371. $("#elh2").empty().append("<h2>Bienvenido: " + data.user + "!</h2>");
  372. $.ajax({
  373. url: 'http://localhost:8084/mavenCarrito/session?ob=app&op=inicializar',
  374. type: 'GET',
  375. xhrFields: {
  376. withCredentials: true
  377. },
  378. datatype: 'json',
  379. success: function (data) {
  380. if (data.status == 200) {
  381. $.ajax({
  382. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list',
  383. type: 'GET',
  384. xhrFields: {
  385. withCredentials: true
  386. },
  387. datatype: 'json',
  388. success: function (data) {
  389.  
  390. for (i = 0; i < data.length; i++) {
  391. $("#nombre" + (i + 1)).empty().append(data[i].nombre);
  392. $("#precio" + (i + 1)).empty().append(data[i].precio);
  393. $("#stock" + (i + 1)).empty().append(data[i].existencias);
  394. $("#img" + (i + 1)).empty().attr("src", data[i].url);
  395. }
  396. }
  397. });
  398. $.ajax({
  399. url: 'http://localhost:8084/mavenCarrito/session?ob=carrito&op=list',
  400. type: 'GET',
  401. xhrFields: {
  402. withCredentials: true
  403. },
  404. datatype: 'json',
  405. success: function (data) {
  406. for (i = 0; i < data.length; i++) {
  407. $("#cart" + (i + 1)).empty().html(data[i].nombre);
  408. $("#qty" + (i + 1)).empty().append(data[i].existencias);
  409. $("#price" + (i + 1)).empty().append(data[i].precio);
  410. $("#price_sub" + (i + 1)).empty().append((data[i].existencias) * (data[i].precio));
  411. }
  412. }
  413. });
  414. }
  415. }
  416. });
  417. } else {
  418. $("#errores").html('<p>Error, revise la contrasenya</p>');
  419. }
  420. },
  421. error: function () {
  422. $("#errores").html("<p>Error.</p>");
  423. }
  424. });
  425. });
  426. $("#logout").click(function () {
  427. event.preventDefault();
  428. $.ajax({
  429. url: 'http://localhost:8084/mavenCarrito/session?ob=usuario&op=logout',
  430. type: 'GET',
  431. xhrFields: {
  432. withCredentials: true
  433. },
  434. datatype: 'json',
  435. success: function (data) {
  436. if (data.status == 200) {
  437. visualizarLogin();
  438. $("#adios").html("<h3>Has sido desconectado correctamente</h3>");
  439. }
  440. },
  441. error: function () {
  442. $("#errores").html("<p>Error.</p>");
  443. }
  444. });
  445. });
  446. //----------------------- BOTONERA -----------------------------------------
  447. //-----------------------BOTON 1 -----------------------------------------
  448. $("#boton1").click(function () {
  449. event.preventDefault();
  450. cant = $("#inp1").val();
  451. $.ajax({
  452. url: 'http://localhost:8084/mavenCarrito/session?ob=carrito&op=add&id=1&cantidad=' + cant,
  453. type: 'GET',
  454. xhrFields: {
  455. withCredentials: true
  456. },
  457. datatype: 'json',
  458. success: function (data) {
  459. if (data.status == 500) {
  460. $("sinstock1").empty().html(data.message);
  461. } else {
  462. $("#cart1").empty().html(data[0].nombre);
  463. $("#qty1").empty().html(data[0].existencias);
  464. $("#price1").empty().html(data[0].precio);
  465. $("#price_sub1").empty().html((data[0].existencias) * (data[0].precio));
  466. }
  467. }
  468. });
  469. $.ajax({
  470. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list',
  471. type: 'GET',
  472. xhrFields: {
  473. withCredentials: true
  474. },
  475. datatype: 'json',
  476. success: function (data) {
  477. for (i = 0; i < data.length; i++) {
  478. $("#nombre" + (i + 1)).empty().append(data[i].nombre);
  479. $("#precio" + (i + 1)).empty().append(data[i].precio);
  480. $("#stock" + (i + 1)).empty().append(data[i].existencias);
  481. $("#img" + (i + 1)).empty().attr("src", data[i].url);
  482. }
  483. }
  484. });
  485. });
  486. //-----------------------BOTON 2 -----------------------------------------
  487. $("#boton2").click(function () {
  488. event.preventDefault();
  489. cant = $("#inp2").val();
  490. $.ajax({
  491. url: 'http://localhost:8084/mavenCarrito/session?ob=carrito&op=add&id=2&cantidad=' + cant,
  492. type: 'GET',
  493. xhrFields: {
  494. withCredentials: true
  495. },
  496. datatype: 'json',
  497. success: function (data) {
  498. if (data.status == 500) {
  499. $("sinstock2").empty().html(data.message);
  500. } else {
  501. $("#cart2").empty().html(data[1].nombre);
  502. $("#qty2").empty().html(data[1].existencias);
  503. $("#price2").empty().html(data[1].precio);
  504. $("#price_sub2").empty().html((data[1].existencias) * (data[1].precio));
  505. }
  506. }
  507. });
  508. $.ajax({
  509. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list',
  510. type: 'GET',
  511. xhrFields: {
  512. withCredentials: true
  513. },
  514. datatype: 'json',
  515. success: function (data) {
  516. for (i = 0; i < data.length; i++) {
  517. $("#nombre" + (i + 1)).empty().append(data[i].nombre);
  518. $("#precio" + (i + 1)).empty().append(data[i].precio);
  519. $("#stock" + (i + 1)).empty().append(data[i].existencias);
  520. $("#img" + (i + 1)).empty().attr("src", data[i].url);
  521. }
  522. }
  523. });
  524. });
  525. //-----------------------BOTON 3 -----------------------------------------
  526. $("#boton3").click(function () {
  527. event.preventDefault();
  528. cant = $("#inp3").val();
  529. $.ajax({
  530. url: 'http://localhost:8084/mavenCarrito/session?ob=carrito&op=add&id=3&cantidad=' + cant,
  531. type: 'GET',
  532. xhrFields: {
  533. withCredentials: true
  534. },
  535. datatype: 'json',
  536. success: function (data) {
  537. if (data.status == 500) {
  538. $("sinstock3").empty().html(data.message);
  539. } else {
  540. $("#cart3").empty().html(data[2].nombre);
  541. $("#qty3").empty().html(data[2].existencias);
  542. $("#price3").empty().html(data[2].precio);
  543. $("#price_sub3").empty().html((data[2].existencias) * (data[2].precio));
  544. }
  545. }
  546. });
  547. $.ajax({
  548. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list',
  549. type: 'GET',
  550. xhrFields: {
  551. withCredentials: true
  552. },
  553. datatype: 'json',
  554. success: function (data) {
  555. for (i = 0; i < data.length; i++) {
  556. $("#nombre" + (i + 1)).empty().append(data[i].nombre);
  557. $("#precio" + (i + 1)).empty().append(data[i].precio);
  558. $("#stock" + (i + 1)).empty().append(data[i].existencias);
  559. $("#img" + (i + 1)).empty().attr("src", data[i].url);
  560. }
  561. }
  562. });
  563. });
  564. //-----------------------BOTON 4 -----------------------------------------
  565. $("#boton4").click(function () {
  566. event.preventDefault();
  567. cant = $("#inp4").val();
  568. $.ajax({
  569. url: 'http://localhost:8084/mavenCarrito/session?ob=carrito&op=add&id=4&cantidad=' + cant,
  570. type: 'GET',
  571. xhrFields: {
  572. withCredentials: true
  573. },
  574. datatype: 'json',
  575. success: function (data) {
  576. if (data.status == 500) {
  577. $("sinstock4").empty().html(data.message);
  578. } else {
  579. $("#cart4").empty().html(data[3].nombre);
  580. $("#qty4").empty().html(data[3].existencias);
  581. $("#price4").empty().html(data[3].precio);
  582. $("#price_sub4").empty().html((data[3].existencias) * (data[3].precio));
  583. }
  584. }
  585. });
  586. $.ajax({
  587. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list',
  588. type: 'GET',
  589. xhrFields: {
  590. withCredentials: true
  591. },
  592. datatype: 'json',
  593. success: function (data) {
  594. for (i = 0; i < data.length; i++) {
  595. $("#nombre" + (i + 1)).empty().append(data[i].nombre);
  596. $("#precio" + (i + 1)).empty().append(data[i].precio);
  597. $("#stock" + (i + 1)).empty().append(data[i].existencias);
  598. $("#img" + (i + 1)).empty().attr("src", data[i].url);
  599. }
  600. }
  601. });
  602. });
  603.  
  604. //--------------------------- VACIAR CARRITO ---------------
  605. $("#vaciarCarr").click(function () {
  606. event.preventDefault();
  607. $.ajax({
  608. url: 'http://localhost:8084/mavenCarrito/session?ob=carrito&op=clean',
  609. type: 'GET',
  610. xhrFields: {
  611. withCredentials: true
  612. },
  613. datatype: 'json',
  614. success: function (data) {
  615. if (data.status == 200) {
  616. for (i = 1; i <= 4; i++) {
  617. $("#cart" + i).empty();
  618. $("#qty" + i).empty();
  619. $("#price" + i).empty();
  620. $("#price_sub" + i).empty();
  621. }
  622. $.ajax({
  623. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list',
  624. type: 'GET',
  625. xhrFields: {
  626. withCredentials: true
  627. },
  628. datatype: 'json',
  629. success: function (data) {
  630. for (i = 0; i < data.length; i++) {
  631. $("#nombre" + (i + 1)).empty().append(data[i].nombre);
  632. $("#precio" + (i + 1)).empty().append(data[i].precio);
  633. $("#stock" + (i + 1)).empty().append(data[i].existencias);
  634. $("#img" + (i + 1)).empty().attr("src", data[i].url);
  635. }
  636. }
  637. });
  638. } else {
  639. $("#errVaciar").html("<b>" + data.message + "</b>");
  640. }
  641. }
  642. });
  643. $.ajax({
  644. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list',
  645. type: 'GET',
  646. xhrFields: {
  647. withCredentials: true
  648. },
  649. datatype: 'json',
  650. success: function (data) {
  651. for (i = 0; i < data.length; i++) {
  652. $("#nombre" + (i + 1)).empty().append(data[i].nombre);
  653. $("#precio" + (i + 1)).empty().append(data[i].precio);
  654. $("#stock" + (i + 1)).empty().append(data[i].existencias);
  655. $("#img" + (i + 1)).empty().attr("src", data[i].url);
  656. }
  657. }
  658. });
  659. });
  660.  
  661.  
  662. function visualizarSesion() {
  663. $("#fueraForm").css("display", "none");
  664. $("#fueraForm").css("visibility", "hidden");
  665. $("#teveo").css("visibility", "visible");
  666. $("#errores").empty();
  667. $("#adios").empty();
  668. }
  669.  
  670. function visualizarLogin() {
  671. $("#fueraForm").css("display", "block");
  672. $("#fueraForm").css("visibility", "visible");
  673. $("#teveo").css("visibility", "hidden");
  674. $("#elh2").empty();
  675. $("#errores").empty();
  676. }
  677.  
  678.  
  679. });
  680. </script>
  681.  
  682. </body>
  683. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!