ajax.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Test: Ajax</title>
  7. <link href="../example/lib/weui.min.css" rel="stylesheet"/>
  8. <link href="../example/lib/demo.css" rel="stylesheet"/>
  9. <script src="../example/lib/zepto.min.js"></script>
  10. <script src="../example/lib/zepto.touch.min.js"></script>
  11. <script src="../dist/vconsole.min.js"></script>
  12. </head>
  13. <body ontouchstart>
  14. <div class="page">
  15. <a onclick="asyncAjax()" href="javascript:;" class="weui_btn weui_btn_default">asyncAjax</a>
  16. <a onclick="syncAjax()" href="javascript:;" class="weui_btn weui_btn_default">syncAjax</a>
  17. <a onclick="postAjax()" href="javascript:;" class="weui_btn weui_btn_default">postAjax</a>
  18. </div>
  19. </body>
  20. </html>
  21. <script>
  22. function postAjax() {
  23. console.info('postAjax() Start');
  24. $.ajax({
  25. type: 'POST',
  26. url: 'success.json',
  27. data: {
  28. id: Math.random()
  29. },
  30. dataType: 'json',
  31. success: function(data) {
  32. console.log('postAjax Response:', data);
  33. },
  34. error: function(xhr, type) {
  35. console.log('postAjax Error:', type);
  36. }
  37. });
  38. console.info('postAjax() End');
  39. }
  40. function asyncAjax() {
  41. console.info('asyncAjax() Start, response should be logged after End');
  42. $.ajax({
  43. type: 'GET',
  44. url: 'success.json',
  45. async: true,
  46. dataType: 'json',
  47. success: function(data) {
  48. console.log('asyncAjax Response:', data);
  49. },
  50. error: function(xhr, type) {
  51. console.log('asyncAjax Error:', type);
  52. }
  53. });
  54. console.info('asyncAjax() End');
  55. }
  56. function syncAjax() {
  57. console.info('syncAjax() Start, response should be logged before End');
  58. $.ajax({
  59. type: 'GET',
  60. url: 'success.json',
  61. async: false,
  62. dataType: 'json',
  63. success: function(data) {
  64. console.log('syncAjax Response:', data);
  65. },
  66. error: function(xhr, type) {
  67. console.log('syncAjax Error:', type);
  68. }
  69. });
  70. console.info('syncAjax() End');
  71. }
  72. </script>