1-8 使用ajaxSetup()方法设置全局Ajax默认选项
本节编程练习不计算学习进度,请电脑登录imooc.com操作

使用ajaxSetup()方法设置全局Ajax默认选项

使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为:

jQuery.ajaxSetup([options])$.ajaxSetup([options])

可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值。

例如,先调用ajaxSetup()方法设置全局的Ajax选项值,再点击两个按钮,分别使用ajax()方法请求不同的服务器数据,并将数据内容显示在页面,如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用ajaxSetup()方法设置了Ajax请求时的一些全局性的配置选项后,在两次调用ajax请求服务器txt文件时,只需要设置url地址即可。

任务

我来试试,亲自使用ajaxSetup()方法设置Ajax请求时的全局性配置选项

在下列代码的第27、28、29行中,使用ajaxSetup()方法设置Ajax请求时的全局性配置选项,完成检测输入数据奇偶性和是否大于0的检测。

注:url路径为 http://www.imooc.com/data/check.php

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>使用ajaxSetup()方法设置全局ajax请求默认选项</title>
  5. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="divtest">
  11. <div class="title">
  12. <span class="fl">奇偶性和是否大于0</span>
  13. <span class="fr">
  14. <input id="btnShow_1" type="button" value="验证1" />
  15. <input id="btnShow_2" type="button" value="验证2" />
  16. </span>
  17. </div>
  18. <ul>
  19. <li>请求输入一个数字
  20. <input id="txtNumber" type="text" size="12" />
  21. </li>
  22. </ul>
  23. </div>
  24.  
  25. <script type="text/javascript">
  26. $(function () {
  27. ?
  28. ?
  29. ?
  30. $("ul").append("<li>你输入的<b> "
  31. + $("#txtNumber").val() + " </b><b> "
  32. + data + " </b></li>");
  33. }
  34. });
  35. $("#btnShow_1").bind("click", function () {
  36. $.ajax({
  37. data: { num: $("#txtNumber").val() },
  38. url: "http://www.imooc.com/data/check.php"
  39. });
  40. })
  41. $("#btnShow_2").bind("click", function () {
  42. $.ajax({
  43. data: { num: $("#txtNumber").val() },
  44. url: "http://www.imooc.com/data/check_f.php"
  45. });
  46. })
  47. });
  48. </script>
  49. </body>
  50. </html>
  1. #divtest
  2. {
  3. width: 282px;
  4. }
  5. #divtest .title
  6. {
  7. padding: 8px;
  8. background-color:Blue;
  9. color:#fff;
  10. height: 23px;
  11. line-height: 23px;
  12. font-size: 15px;
  13. font-weight: bold;
  14. }
  15. ul
  16. {
  17. float: left;
  18. width: 280px;
  19. padding: 5px 0px;
  20. margin: 0px;
  21. font-size: 14px;
  22. list-style-type: none;
  23. }
  24. ul li
  25. {
  26. float: left;
  27. width: 280px;
  28. height: 23px;
  29. line-height: 23px;
  30. padding: 3px 8px;
  31. }
  32. .fl
  33. {
  34. float: left;
  35. }
  36. .fr
  37. {
  38. float: right;
  39. }
下一节