使用jQuery的ajax方法向服务器发送获取和发布请求的方法

打算写一篇关于ajax系列的博文，主要是为了自己，学习ajax的知识和用法，以便在工作中更好地使用ajax。

假设有一个网站A，有一个简单的输入用户名的页面，界面上有两个输入框。第一个输入框包含在表单中实现表单提交，第二个输入框是单独的，不包含在表单中。在这里，我们将使用这两个输入框来学习jQuery的ajax。

1、前端html和javascript代码

网页html

main style=' text-align : center；margin: 200px auto'H2输入用户名/H2 form class=' action=' demo 01 . PHP '方法=' post ' style=' margin-bottom : 20px；'输入id=' user-name '类型=' text '名称=' username '占位符='请填写您的用户名'输入类型=' submit '名称=' submit1 '值=' formsubmit1 '类=' input '/The formin put id=' user-name 2 '类型=' text '名称=' username2 '占位符='请填写您的用户名'输入类型=' button '名称=' submit2 '值=' Ajax submit2' div类=' box '/Div/mainscript src=' http 333././js/jquery-3 . 1 . 0 . min . js '/script script src=' http 3360 demo . js '/script page。请注意，这是一个简单的GET请求。

$(函数($) { $('input[name=submit2]')。on('click '，函数(e){ let username=' '；if('！==(用户名=$(' #用户名2 ')。val())) { $。ajax({ url: `demo.php？Name=${username} `，datatype:' JSON '，method:' get '，success3360函数(数据){if(数据。结果==1) {$('。方框')。html (` div您的姓名$ {username}已成功保存。/div `)；} }，error:函数(xhr) {//出现错误的原因有很多，所以我们将研究alert ('error :' JSON。Stringify (xhr))稍后。} }) .完成(函数(数据){//请求成功后要做的工作console . log(' success ')；}) .fail(function() {//请求失败后要做的工作console . log(' error ')；}) .总是(function() {//不管成功或失败都要完成的工作console . log(' complete ')；});} });});有两种方法可以编写jQuery的ajax()方法：$。ajax(url [，设置])；还有美元。Ajax([设置])；两种写作方法都可以用。我觉得第一种方法适合参数少的情况。例如，如果您只对url进行简单的请求，并且对返回的数据、格式和错误没有要求，那么您只需要传递一个url参数，然后就可以使用第一种编写方法。以上demo01.js采用第二种编写方式，参数及相关功能说明如下。

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

可以看到这里的参数类型都是javascript对象，也就是o={ key : value }；这种数据。根据jQuery的文档，这里的参数只能是PlainObject(对象类型的对象)，不能是null、用户定义的数组，也不能是属于像document这样的执行环境(比如浏览器)的某个类型的对象。这里不太清楚，我们可以做一个小实验。在命令行上打开节点repl，并执行以下测试：

节点类型为(null)；object ' type of([])；对象的类型(文档)；({})的“undefined”类型；“Object”可以看到null、[](数组类型)和{}(对象类型)都是对象。因为js中的一切都是一个对象。在交互环境中，文档是一个未定义的变量，因此它的类型是未定义的。如果在浏览器环境中测试(文档)的类型，它的类型也是对象。下面逐一解释代码中使用的参数：

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

数据类型，字符串。发出请求后预期从服务器返回的数据类型。可以指定的类型有xml、html、脚本、json、jsonp和文本。如果没有指定，jquery将根据MIME进行判断，并将返回以下xml、json、script和html之一。

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

成功，键入：函数(任何数据，字符串文本状态，jqxhr jqxhr)，匿名函数。HTTP请求成功后要调用的函数可以向其传递三个参数：从服务器返回的数据(如果上面指定了dataType，则服务器返回的dataType需要与上面指定的类型一致)、可以描述状态的字符串textStatus和jqXHR对象。您可以看到上面只传递了从服务器返回的数据。

错误，类型：函数(jqxhr jqxhr，字符串文本状态，抛出字符串错误)，匿名函数。HTTP请求失败后要调用的函数也可以传递三个参数。

除了这些参数之外，还有许多其他参数，如async、dataFilter、mimeType等。但是，这个简单的脚本没有使用这么多参数。

(2)“延时加载功能”

在上面的代码中，$。Ajax()。完成()。失败()。总是()jqxhr。done()、jqXHR.fail()和jqXHR.always()可以在延迟对象被解决、拒绝、解决或拒绝的三种情况下与要处理的工作一起添加，例如为什么可以这样做取决于什么$。ajax()返回，这是一个jqXHR对象(当jquery版本大于1.5时)。这个对象实现了一个Promise接口(Promise机制，用于传递异步操作消息，表示一个事件，其结果要到将来才能知道)。这允许在一个请求中添加多个回调函数，即使在请求完成后也是如此。

标题“延迟加载”不够准确，但有延迟加载的效果。关于这个问题更详细的解释，请参考jQuery文档中对jqXHR的解释或者jQuery的延迟对象。

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

后端的逻辑很简单：我们将前端获得的数据保存到一个名为data-demo01的文件中，如果数据保存成功，则向前端返回一个1作为标志。

(1)前端ajax发起一个GET请求

如果前端ajax发起GET请求，后端也更容易处理：

if (isset($_GET['name'])！空($ _ GET[' name ']){ $ username=trim($ _ GET[' name '])；if(file _ put _ contents(' data-demo 01 '，$ username)){ echo ' { result ' : 1 } '；} }(2)前端ajax发起POST请求

ajax()的url和方法参数需要在js代码中修改，并且需要添加一个数据参数。修改后的参数如下：

//相同的代码省略了$。Ajax({ URL : ` demo01.php `，datatype3360' JSON '，method:' POST '，data : { ' username ' : username })。//相同的代码省略了，因为数据是通过post传递的。因此，从url中删除用于传输数据的参数，下面的dataType应该与json格式的datatype一致，然后将username作为值传递。

然后可以确定后端代码：

if (isset($_POST['username'])！空($ _ POST[' username ']){ $ username=trim($ _ POST[' username '])；if(file _ put _ contents(' data-demo 01 '，$ username)){ echo ' { result ' : 1 } '；}}如果没有出错，效果应该如下。然后查看data-demo01，名称就保存下来了。

那么问题来了。出了问题怎么办？比如data-demo01文件不可写，或者后台服务器返回的数据格式错误，或者网络错误。那怎么处理呢？我现在不确定。我们以后再研究吧。

以上是利用边肖介绍的jQuery的ajax方法向服务器发送get和post请求的方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！