UDN-企业互联网技术人气社区

板块导航

浏览  : 1121
回复  : 10

[jQuery] jQuery的ajax方法向服务器发出get和post请求

[复制链接]
genie1003的头像 楼主
发表于 2017-2-9 10:41:39 | 显示全部楼层 |阅读模式
  假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个form表单里用来实现form提交,第二个输入框是单独的、没有包含在form里,下面就用这两个输入框来学习下jQuery的ajax。
1.png

  1,前端的html和JavaScript代码

  页面html
  1. <main style="text-align: center; margin: 200px auto;">
  2.         <h2>输入用户名</h2>
  3.         <form class="" action="demo01.php" method="post" style="margin-bottom: 20px;">
  4.             <input id="user-name" type="text" name="username" placeholder="请填写您的用户名">
  5.             <input type="submit" name="submit1" value="form提交1" class="input">
  6.         </form>
  7.         <input id="user-name2" type="text" name="username2" placeholder="请填写您的用户名">
  8.         <input type="button" name="submit2" value="ajax提交2">
  9.         <div class="box">

  10.         </div>
  11.     </main>

  12.     <script src="../../js/jquery-3.1.0.min.js"></script>
  13.     <script src="demo01.js"></script>
复制代码

  页面中引入的demo01.js代码,注意此处实现的是一个简单的GET请求
  1. $(function($) {
  2.     $('input[name=submit2]').on('click', function(e) {
  3.         let username = '';
  4.         if ('' !== (username = $('#user-name2').val())) {
  5.             $.ajax({
  6.                 url: `demo0.php?name=${username}`,
  7.                 dataType: 'json',
  8.                 method: 'GET',
  9.                 success: function(data) {
  10.                     if (data.result == 1) {
  11.                         $('.box').html(`<div>你的姓名${username}已成功保存。</div>`);
  12.                     }
  13.                 },
  14.                 error: function(xhr) {
  15.                     // 导致出错的原因较多,以后再研究
  16.                     alert('error:' + JSON.stringify(xhr));
  17.                 }
  18.             })
  19.             .done(function(data) {
  20.                 // 请求成功后要做的工作
  21.                 console.log('success');
  22.             })
  23.             .fail(function() {
  24.                 // 请求失败后要做的工作
  25.                 console.log('error');
  26.             })
  27.             .always(function() {
  28.                 // 不管成功或失败都要做的工作
  29.                 console.log('complete');
  30.             });
  31.         }
  32.     });
  33. });
复制代码

  jQuery的ajax()方法有两种写法,分别是: $.ajax(url [, settings]); 和 $.ajax([settings]); 两种写法都可以,感觉第一种方法适合用于参数较少的情况,比如,如果只是对一个url做一个简单的请求,不对返回的数据、格式和错误有要求,只需要传递一个url参数就可以,那就可以用第一种写法。上面的demo01.js中采用的是第二种写法,下面解释下参数和相关的函数。

  (1)上面代码中ajax()的参数

  可以看到这里的参数类型都是JavaScript对象,即都是 o = {key: value}; 这种类型的数据。jQuery的文档中规定了,这里的参数只能是PlainObject(对象类型的对象),不能是null、自定义的数组、或者像docement这种归属于某种执行环境(比如浏览器)属于某种类型的对象。这里不太好说清楚,可以做个小试验。在命令行里打开node repl,进行下测试:
  1. > node
  2. > typeof(null);
  3. 'object'
  4. > typeof([]);
  5. 'object'
  6. > typeof(document);
  7. 'undefined'
  8. > typeof({});
  9. 'object'
复制代码

  可以看到null、[](数组类型)、{}(对象类型)都是对象。因为在js中一切皆对象。而在交互式环境中,document则是未定义的一个变量,所以它的类型是undefined。如果在浏览器环境下测试下typeof(document),那么它的类型也是object。下面逐个解释下代码用到的参数:

  url,要请求的url地址,它的值应该是包含url的字符串。

  dataType,字符串。发出请求后,期望从服务器返回的数据类型。可以指定的类型有xml、html、script、json、jsonp、text。如果不指定,jquery会基于MIME做判断,并会返回一个下面xml、json、script、html当中的一种类型。

  method,字符串。HTTP请求方法,默认为GET,上面代码中指定为POST。

  success, Type: Function( Anything data, String textStatus, jqXHR jqXHR ) ,匿名函数。HTTP请求成功后要调用的函数,可以传递三个参数给它:从服务器返回的数据(如果上面指定了dataType,则服务器返回的数据类型需要与上面dataType指定的类型一致)、一个可以描述状态的字符串textStatus、还有一个jqXHR对象。可以看到上面只传递了从服务器返回的数据data。

  error, Type: Function( jqXHR jqXHR, String textStatus, String errorThrown ) ,匿名函数。HTTP请求失败后要调用的函数,同样也可以传递三个参数。

  除了用到的这些参数,还有许多其他的如:async、dataFilter、mimeType等其他参数,不过现在的这个简单的脚本还用不到那么多参数。

  (2)“延迟加载函数”

  上面代码中 $.ajax().done().fail().always() jqXHR.done()、jqXHR.fail()、jqXHR.always()中分别可以添加deferred对象被解析、被拒绝、被解析或被拒绝这三种情况下的要处理的工作,比如添加个函数什么的。为什么能够这么做呢,这要看$.ajax()返回了什么,它返回的是jqXHR对象(jquery版本大于1.5时)。这个对象实现了Promise interface(Promise机制,用来传递异步操作消息,代表了某个未来才会知道结果的事件)。这就允许在一次请求中添加多个回调函数,甚至可以在请求完成后添加回调函数。

  标题“延迟加载”描述的不够准确,但从效果上看是有延迟加载的效果。关于这个问题更详细的解释可以参考jQuery文档中对jqXHR的解释 或一位前端前辈的解释jQuery的deferred对象详解 。

  2,后端运行在nginx服务器上的php代码

  后端的逻辑很简单:我们把前端获取的数据保存到名为data-demo01的文件中,保存成功则向前端返回一个1作为标志。

  (1)前端ajax发起GET请求

  如果前端的ajax发起的是一个GET请求,那么后端也比较好处理:
  1. if (isset($_GET['name']) && !empty($_GET['name'])) {
  2.          $username = trim($_GET['name']);
  3.          if (file_put_contents('data-demo01', $username)) {
  4.              echo '{"result": 1}';
  5.          }8     }
复制代码

  (2)前端ajax发起POST请求

  js代码中需要修改下ajax()的url、method参数,并增加一个data参数,修改后如下:
  1. // 相同的代码省略
  2. $.ajax({
  3.     url: `demo01.php`,
  4.     dataType: 'json',
  5.     method: 'POST',
  6.     data: {"username": username},
  7. // 相同的代码省略
复制代码

  因为用POST传递数据,所以去掉url中用来传递数据的参数,下面的data类型要与dataType一致,为json格式,然后将username作为值传递。

  那么后端的代码也就可以确定了:
  1. if (isset($_POST['username']) && !empty($_POST['username'])) {
  2.         $username = trim($_POST['username']);
  3.         if (file_put_contents('data-demo01', $username)) {
  4.             echo '{"result": 1}';
  5.         }
  6.     }
复制代码

  如果不出错的话,效果应该是下面这样然后查看下data-demo01,名字果然被保存了。
1.gif

  那么问题来了,如果出错了呢?比如data-demo01文件不可写,或者后台服务器返回的数据格式有错误,或者网络出错。

相关帖子

发表于 2017-2-9 10:42:15 | 显示全部楼层
鄙视楼下的顶帖没我快,哈哈
使用道具 举报

回复

发表于 2017-2-9 22:24:58 | 显示全部楼层
还是挺有借鉴意义的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部