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


Posted in Javascript onJanuary 13, 2017

打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax。

假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个form表单里用来实现form提交,第二个输入框是单独的、没有包含在form里,下面就用这两个输入框来学习下jQuery的ajax。

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

1,前端的html和javascript代码

页面html

<main style="text-align: center; margin: 200px auto;">
   <h2>输入用户名</h2>
   <form class="" action="demo01.php" method="post" style="margin-bottom: 20px;">
   <input id="user-name" type="text" name="username" placeholder="请填写您的用户名">
    <input type="submit" name="submit1" value="form提交1" class="input">
   </form>
   <input id="user-name2" type="text" name="username2" placeholder="请填写您的用户名">
   <input type="button" name="submit2" value="ajax提交2">
   <div class="box">
   </div>
  </main>
  <script src="../../js/jquery-3.1.0.min.js"></script>
  <script src="demo.js"></script>

页面中引入的demo01.js代码,注意此处实现的是一个简单的GET请求。

$(function($) {
  $('input[name=submit2]').on('click', function(e) {
   let username = '';
   if ('' !== (username = $('#user-name2').val())) {
    $.ajax({
     url: `demo.php?name=${username}`,
     dataType: 'json',
     method: 'GET',
     success: function(data) {
      if (data.result == 1) {
       $('.box').html(`<div>你的姓名${username}已成功保存。</div>`);
      }
     },
     error: function(xhr) {
      // 导致出错的原因较多,以后再研究
      alert('error:' + JSON.stringify(xhr));
     }
    })
    .done(function(data) {
     // 请求成功后要做的工作
     console.log('success');
    })
    .fail(function() {
     // 请求失败后要做的工作
     console.log('error');
    })
    .always(function() {
     // 不管成功或失败都要做的工作
     console.log('complete');
    });
   }
  });
 });

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

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

可以看到这里的参数类型都是javascript对象,即都是 o = {key: value}; 这种类型的数据。jQuery的文档中规定了,这里的参数只能是PlainObject(对象类型的对象),不能是null、自定义的数组、或者像docement这种归属于某种执行环境(比如浏览器)属于某种类型的对象。这里不太好说清楚,可以做个小试验。在命令行里打开node repl,进行下测试:

> node
 > typeof(null);
 'object'
 > typeof([]);
 'object'
 > typeof(document);
 'undefined'
 > typeof({});
 '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请求,那么后端也比较好处理:

if (isset($_GET['name']) && !empty($_GET['name'])) {
   $username = trim($_GET['name']);
   if (file_put_contents('data-demo01', $username)) {
    echo '{"result": 1}';
   } 
}

(2)前端ajax发起POST请求

js代码中需要修改下ajax()的url、method参数,并增加一个data参数,修改后如下:

// 相同的代码省略
 $.ajax({
  url: `demo01.php`,
  dataType: 'json',
  method: 'POST',
  data: {"username": username},
 // 相同的代码省略

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

那么后端的代码也就可以确定了:

if (isset($_POST['username']) && !empty($_POST['username'])) {
   $username = trim($_POST['username']);
   if (file_put_contents('data-demo01', $username)) {
    echo '{"result": 1}';
   }
  }

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

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

那么问题来了,如果出错了呢?比如data-demo01文件不可写,或者后台服务器返回的数据格式有错误,或者网络出错。那又该怎么处理呢?我现在也不太清楚,后续再研究吧。

以上所述是小编给大家介绍的使用jQuery的ajax方法向服务器发出get和post请求的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
js异步编程小技巧详解
Aug 14 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 #Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 #Javascript
js实现淡入淡出轮播切换功能
Jan 13 #Javascript
js仿百度音乐全选操作
Jan 13 #Javascript
js实现tab选项卡切换功能
Jan 13 #Javascript
js制作可以延时消失的菜单
Jan 13 #Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 #Javascript
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
在WIN98下以apache模块方式安装php
2006/10/09 PHP
在PHP中使用模板的方法
2008/05/24 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
js动态切换图片的方法
2015/01/20 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
python 爬取微信文章
2016/01/30 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
python实现翻译word表格小程序
2020/02/27 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
宾馆总经理岗位职责
2014/02/14 职场文书
大学生军训感想
2014/02/16 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
php png失真的原因及解决办法
2021/10/24 PHP