ajax系列之用jQuery的ajax方法向服务器发出get和post请求
打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax。
假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个form表单里用来实现form提交,第二个输入框是单独的、没有包含在form里,下面就用这两个输入框来学习下jQuery的ajax。
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="demo01.js"></script>
页面中引入的demo01.js代码,注意此处实现的是一个简单的GET请求。
$(function($) {
$('input[name=submit2]').on('click', function(e) {
let username = '';
if ('' !== (username = $('#user-name2').val())) {
$.ajax({
url: `demo0.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}';
}
6 }
(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,名字果然被保存了。
那么问题来了,如果出错了呢?比如data-demo01文件不可写,或者后台服务器返回的数据格式有错误,或者网络出错。那又该怎么处理呢?我现在也不太清楚,后续再研究吧。
完
ajax系列之用jQuery的ajax方法向服务器发出get和post请求的更多相关文章
- 原生态AJAX详解和jquery对AJAX的封装
AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...
- 深入理解ajax系列第九篇——jQuery中的ajax
前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而 ...
- jQuery系列 第八章 jQuery框架Ajax模块
第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是Ajax实现的关键,发送异步请求.接收服务器端的响应以及执 ...
- ajax向服务器发出get和post请求
假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个form表单里用来实现form提交,第二个输入框是单独的.没有包含在form里,下面就用这两个输入框来学习下j ...
- 基于jQuery的ajax系列之用FormData实现页面无刷新上传
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...
- JQuery中ajax的相关方法总结
前提条件 话说是jquery中的ajax方法,那么前提条件当然是引入jquery啦. <script src="http://libs.baidu.com/jquery/1.9.0/j ...
- JQuery中Ajax的操作
JQuery Ajax异步操作的方式: $.ajax,$.post, $.get, $.getJSON. 一, $.ajax,这个是JQuery对ajax封装的最基础步,通过使用这个函数可以完成异 ...
- 三、jQuery--jQuery基础--jQuery基础课程--第8章 jQuery 实现Ajax应用
1.使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:load(url,[data],[callback]) ...
- jquery中ajax的使用
Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进 ...
随机推荐
- mysql utf8mb4与emoji表情
一 什么是Emoji emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. emoji表情符号,在外国的手机短信里 ...
- Mvc 导出 Excel
Mvc 导出 Excel 之前接触过Webform,winfrom 的导出Excel方法 ,优点:省事.缺点:服务器必须安装Office 这几天做项目 和 大牛学习了一下 新的方法,自己加以总结.希望 ...
- java查找反复类/jar包/普通文件
开发web应用时,有时更新了类却没有生效,事实上是由于jboss/tomcat中其它公布包下有同名类(包含全路径都同样). 于是萌发了做个程序来检查指定文件夹是否存在反复类(通过asm从类文件里取类的 ...
- [译]Java 设计模式之适配器
(文章翻译自Java Design Pattern: Adapter) 适配器模式在现在的Java框架中被频繁的用到. 当你想去使用一个存在的类而且它的接口和你需要的不吻合,或者是你想去创建一个可复用 ...
- 来自 Repository 的一丝线索,Domain Model 再重新设计
来自 Repository 的一丝线索,Domain Model 再重新设计 写在前面 阅读目录: 疑惑解读 设计窘境 一幅图的灵感 为嘛还是你-Repository 后记 上一篇<No zuo ...
- innerText与innerHTML的区别
innerText与innerHTML的区别:1.innerText将所有文本内容作为普通的文本2.innerHTML会识别文本内容中是否含有html标签,它能够把html标签的效果显示出来3.inn ...
- Oracle琐碎笔记2
备注:以下所有操作均在sqlplus中执行. 开始前输入:spool c:\jiyi.txt;结束后输入:spool off;就会记忆操作的所有记录save c:\sql.sql;保存sql脚本可以使 ...
- 浅谈DevExpress<一>:换肤
最近要用到devExpress,一句话,很好很强大,比起vs自带的winform界面,种类和花样要多了不少,然而,强力的功能带来了庞大的信息量,所以我打算通过一些小模块来和大家一起对它进行探讨和研究. ...
- 取xml文件转成List<T>对象的两种方法
读取xml文件转成List<T>对象的两种方法(附源码) 读取xml文件转成List<T>对象的两种方法(附源码) 读取xml文件,是项目中经常要用到的,所以就总结一下,最 ...
- [转]How WebKit Loads a Web Page
ref:https://www.webkit.org/blog/1188/how-webkit-loads-a-web-page/ Before WebKit can render a web pag ...