程序员的知识教程库

网站首页 > 教程分享 正文

ajax一切正常却出不来结果怎么办?

henian88 2024-08-26 15:30:35 教程分享 6 ℃ 0 评论

利用jQuery可以将结构(Html)、美化(Css)与交互(JavaScript)的部分有效的分离，从而让页面得到良好的可读性。

利用jQuery开发程序的步骤如下:

1、将jquery-1.11.3.js 复制到工程的js目录下

2、 在当前页面利用<script>标签引入jquery-1.11.3.js

3、在引入该js后,我们的程序中就增加了一个内置对象jQuery,这是jQuery的核心对象,同时jQuery对象还可以使用美元符号$进行替

4、在引入后<script>标签内编写jQuery代码

文档就绪函数

文档就绪函数是jQuery中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

文档就绪函数的使用方法

完整方式: $(document).ready(fn) 或者jQuery(document).ready(fn)

简写方式: $(fn)

其中参数fn是指一个函数,代表了页面DOM元素加载完成后要执行的代码.

请确保在 <body> 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

案例

[html] view plain copy

  1. <body>
  2. <!-- 添加页面布局 -->
  3. <div>
  4. <table border="1">
  5. <tr style="height: 40px;display: none;">
  6. <td style="width: 100px">商品id</td>
  7. <td style="width: 150px">
  8. <input type="text" id="id" value="">
  9. </td>
  10. </tr>
  11. <tr style="height: 40px;">
  12. <td style="width: 100px">商品分类</td>
  13. <td style="width: 150px">
  14. <select id="cate" onchange="change()">
  15. <option>---请选择---</option>
  16. </select>
  17. </td>
  18. </tr>
  19. <tr style="height: 40px;">
  20. <td style="width: 100px" >商品品牌</td>
  21. <td style="width: 150px">
  22. <select id="brand">
  23. <option>---请选择---</option>
  24. </select>
  25. </td>
  26. </tr>
  27. <tr style="height: 40px;">
  28. <td style="width: 100px" >商品名称</td>
  29. <td style="width: 150px" >
  30. <input id="name" type="text">
  31. </td>
  32. </tr>
  33. <tr style="height: 40px;">
  34. <td style="width: 100px" >商品描述</td>
  35. <td style="width: 150px">
  36. <textarea rows="5" cols="10" id="desc"></textarea>
  37. </td>
  38. </tr>
  39. <tr style="height: 40px;">
  40. <td style="width: 100px" >商品价格</td>
  41. <td style="width: 150px" >
  42. <input type="text" id="price">
  43. </td>
  44. </tr>
  45. <tr style="height: 40px;">
  46. <td colspan="2" style="text-align: center;">
  47. <button onclick="tj()">提交</button>
  48. <button >重置</button>
  49. <button onclick="gbtj()">关闭</button>
  50. </td>
  51. </tr>
  52. </table>
  53. </div>
  54. </body>
  55. <script type="text/javascript">
  56. /* 就绪函数，加载分类列表 */
  57. $(document).ready(function(){
  58. alert("11");
  59. $.ajax({
  60. type: "POST",
  61. url: "goodsController?method=getCateList",
  62. dataType:"json",
  63. data: "",
  64. success: function(obj){
  65. var fl="";
  66. for(var i=0;i<obj.length;i++){
  67. fl+="<option value='"+obj[i].id+"'>"+obj[i].cat_name+"</option>";
  68. }
  69. $("#cate").html(fl);
  70. }
  71. });
  72. });
  73. </script>

这种时候就会出现ajax没有触发的情况，这时将<script></script>放在<body></body>之前，才会正常显示。

当遇到代码没有问题，可结果就是运行不出来时，不妨试一下改变<script></script>的顺序。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表