> 编程开发 > AJAX相关 >

ajax系列之用jQuery的ajax方法向服务器发出get和post请求 2017-01-13 11:31　出处：未知　人气：　

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

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

1，前端的html和javascript代码

页面html

1 <main style="text-align: center; margin: 200px auto;"> 2 <h2>输入用户名</h2> 3 =="margin-bottom: 20px;"> 4 =="请填写您的用户名"> 5 =="input"> 6 </form> 7 =="请填写您的用户名"> 8 ="submit2" value="ajax提交2"> 9 <div class="box"> 10 11 </div> 12 </main> 13 14 > 15 >

页面中引入的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) { alert('error:' + JSON.stringify(xhr)); 17 } 18 }) 19 .done(function(data) { .log('success'); 22 }) 23 .fail(function() { .log('error'); 26 }) 27 .always(function() { .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); > typeof([]); > typeof(document); > 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）“延迟加载函数”