demo.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/html">
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>PhalApi_Demo</title>
  6. <script src="js/SDK/jquery.min.js"></script>
  7. <script src="js/SDK/PhalApi.js"></script>
  8. </head>
  9. <body>
  10. </br></br>
  11. <table>
  12. <tr>
  13. <td> U R L:<input type="txt" id="url"/></td>
  14. <td> A P I:<input type="txt" id="api"/></td>
  15. </tr>
  16. <tr>
  17. <td>参数名1:<input type="txt" id="param1"/></td>
  18. <td>参数值1:<input type="txt" id="value1"/></td>
  19. </tr>
  20. <tr>
  21. <td>参数名2:<input type="txt" id="param2"/></td>
  22. <td>参数值2:<input type="txt" id="value2"/></td>
  23. </tr>
  24. <tr>
  25. <td>参数名3:<input type="txt" id="param3"/></td>
  26. <td>参数值3:<input type="txt" id="value3"/></td>
  27. </tr>
  28. <tr>
  29. <td>返回结果:<textarea rows="10" cols="30" id="rs_data"></textarea></td>
  30. </tr>
  31. </table>
  32. </br></br>
  33. <input onclick="post()" type="button" value="post请求" name="post"/>
  34. <input onclick="get()" type="button" value="get请求" name="get"/>
  35. <input onclick="jsonp()" type="button" value="jsonp请求" name="jsonp"/>
  36. </body>
  37. <script>
  38. var url = $('#url').val('http://127.0.0.1/'); //请求地址
  39. var api = $('#api').val('Default.Index'); //请求接口
  40. //使用普通的post请求
  41. function post(){
  42. var url = $('#url').val();
  43. var api = $('#api').val();
  44. var param1 = $('#param1').val();
  45. var param2 = $('#param2').val();
  46. var param3 = $('#param3').val();
  47. var value1 = $('#value1').val();
  48. var value2 = $('#value2').val();
  49. var value3 = $('#value3').val();
  50. var rs_data = $('#rs_data').val();
  51. var data = {};
  52. data[param1] = value1;
  53. data[param2] = value2;
  54. data[param3] = value3;
  55. query_post(url, api, data, function(rs){
  56. //回调函数
  57. if(rs.ret == 200){
  58. $('#rs_data').val(JSON.stringify(rs));
  59. //如果成功打印信息并且做出相应的处理
  60. alert(rs.ret);
  61. }else{
  62. $('#rs_data').val(JSON.stringify(rs));
  63. //如果失败打印失败信息并且做出相应的处理
  64. alert(rs.msg);
  65. }
  66. });
  67. }
  68. //使用普通的get请求
  69. function get(){
  70. var url = $('#url').val();
  71. var api = $('#api').val();
  72. var param1 = $('#param1').val();
  73. var param2 = $('#param2').val();
  74. var param3 = $('#param3').val();
  75. var value1 = $('#value1').val();
  76. var value2 = $('#value2').val();
  77. var value3 = $('#value3').val();
  78. //拼接GET参数
  79. var data = '&' + param1 + '=' + value1 + '&' + param2 + '=' + value2 + '&' + param3 + '=' + value3;
  80. query_get(url, api, data, function(rs){
  81. //回调函数
  82. if(rs.ret == 200){
  83. $('#rs_data').val(JSON.stringify(rs));
  84. //如果成功打印信息并且做出相应的处理
  85. alert(rs.ret);
  86. }else{
  87. $('#rs_data').val(JSON.stringify(rs));
  88. //如果失败打印失败信息并且做出相应的处理
  89. alert(rs.msg);
  90. }
  91. });
  92. }
  93. //使用jsonP get跨域访问
  94. function jsonp(){
  95. var url = $('#url').val();
  96. var api = $('#api').val();
  97. var param1 = $('#param1').val();
  98. var param2 = $('#param2').val();
  99. var param3 = $('#param3').val();
  100. var value1 = $('#value1').val();
  101. var value2 = $('#value2').val();
  102. var value3 = $('#value3').val();
  103. //拼接GET参数
  104. var data = '&' + param1 + '=' + value1 + '&' + param2 + '=' + value2 + '&' + param3 + '=' + value3;
  105. query_jsonp(url, api, data, function(rs){
  106. //回调函数
  107. if(rs.ret == 200){
  108. $('#rs_data').val(JSON.stringify(rs));
  109. //如果成功打印信息并且做出相应的处理
  110. alert(rs.ret);
  111. }else{
  112. $('#rs_data').val(JSON.stringify(rs));
  113. //如果失败打印失败信息并且做出相应的处理
  114. alert(rs.msg);
  115. }
  116. });
  117. }
  118. </script>
  119. </html>