Ajax Get请求提交数据具体步骤 新手一看就会的详细实操流程

Ajax Get请求的具体操作步骤

其实Ajax Get请求的核心逻辑就一句话：通过浏览器内置的“信使”（XMLHttpRequest对象），把参数拼在URL里发给服务器，再把服务器的响应拿回来显示。我把它拆成5步，每步都给你讲清楚“为什么要这么做”“容易踩的坑”。

Ajax能不刷新页面传数据，全靠这个“信使”——它负责帮你发请求、收响应。写代码的话，直接用var xhr = new XMLHttpRequest();就行。

不过要提一嘴老浏览器的兼容问题：比如IE6及以下得用ActiveXObject("Microsoft.XMLHTTP")，但现在99%的用户都用Chrome、Edge这类现代浏览器，不用特意写兼容代码（真要兼容的话，加个判断就行：var xhr = window.XMLHttpRequest ? new XMLHttpRequest() new ActiveXObject("Microsoft.XMLHTTP");）。

我之前帮邻居做的“社区便民查询页”，一开始没加这个判断，结果他用旧电脑打开时直接报错，后来补上就好了——虽说是小问题，但新手容易忽略。

Get请求的核心特点是参数藏在URL里，比如你要传“用户名=张三”“年龄=25”，就得把URL写成https://xxx.com/api/user?username=张三&age=25。这里要注意3个点：

给你举个真实例子：我做过一个“博客文章搜索功能”，用户输入关键词后，用Get请求传给服务器。代码是这样的：

var keyword = document.getElementById('search-input').value;
var url = 'https://xxx.com/api/search?keyword=' + encodeURIComponent(keyword) + '&t=' + Math.random(); // 加随机数防缓存

接下来要给“信使”下命令：你要发GET请求，地址是刚才拼的URL，并且要“异步”（不卡页面）。代码是xhr.open('GET', url, true);。

这里的3个参数得讲明白：

这步超简单，直接写xhr.send();就行。但要记死：Get请求的send()里不用传任何参数！因为参数已经在URL里了，要是多此一举传了东西（比如xhr.send('name=张三')），服务器根本读不到，还会报错——我当初做“商品库存查询”功能时就犯过这错，查了半小时日志才发现。

最关键的一步来了！“信使”出发后，你得盯着它什么时候带消息回来，还要判断消息是“成功”还是“失败”。这就需要监听onreadystatechange事件（“状态变化时触发”），再结合status（服务器状态码）判断结果。

先给你解释两个核心概念：

直接看我写的“评论提交”示例代码，你就懂了：

xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) { // 请求完成
 if (xhr.status === 200) { // 成功
 // 把服务器返回的评论内容显示在页面上
 document.getElementById('comment-list').innerHTML += xhr.responseText;
 alert('评论成功！');
 } else { // 失败
 alert('请求失败，状态码：' + xhr.status); // 比如404就提示“找不到接口”
 }
 }
};

这里要提醒：responseText是服务器返回的“文本数据”，如果服务器返回的是JSON格式（比如{"code":200,"msg":"成功"}），可以用JSON.parse(xhr.responseText)转成对象，方便取数据——我现在做项目基本都用JSON，因为处理起来更方便。

新手必避的3个坑和注意事项

我当初学的时候，踩过的坑能写满一页纸，今天把最容易掉的3个“陷阱”揪出来，帮你省时间。

坑1：请求总读缓存，拿不到新数据

Get请求有个“小毛病”：浏览器会把之前请求过的URL缓存起来，下次再发同样的请求，直接读缓存，不会真的发给服务器。比如你做“商品库存刷新”功能，点了“刷新”按钮，结果显示的还是10分钟前的库存——这就是缓存搞的鬼。

解决办法超简单：在URL后面加个“随机数”，比如?t=Math.random()或者?t=new Date().getTime()，这样每次URL都不一样，浏览器就不会读缓存了。我帮朋友做“餐饮预约”功能时，就是用这招解决了“刷新不更新”的问题。

坑2：参数太长，请求失败

不同浏览器对URL的长度有限制：比如IE最多支持2083个字符，Chrome是8192个字符。要是你传的参数太多（比如传整个文章内容），URL会超过限制，服务器直接拒绝请求。

：Get请求适合传“小数据”（比如查询关键词、用户ID），要是传“大数据”（比如上传图片、长文本），一定要用Post请求——我之前帮客户做“文章编辑”功能，一开始用Get传文章内容，结果超过长度限制，后来换成Post就好了。

坑3：中文参数乱码

这个坑我踩过N次！比如你传“用户名=张三”，要是没编码，服务器收到的会是“%E5%BC%A0%E4%B8%89”这种乱码，根本没法用。

解决办法就是用encodeURIComponent()包裹中文参数，比如：

var username = '张三';
var encodedName = encodeURIComponent(username); // 结果是"%E5%BC%A0%E4%B8%89"
var url = 'https://xxx.com/api/user?username=' + encodedName;

服务器那边也要用对应的方法解码（比如PHP用urldecode()，Java用URLDecoder.decode()），不过一般后端框架会自动处理，你只要保证前端编码了就行。

最后给你一张“速查表”，记不住就看它

为了方便你对照，我做了张Ajax Get请求的核心步骤表，把代码、说明、注意事项都列清楚了：

其实Ajax Get请求真没那么难——核心就是“拼URL、发请求、收响应”。我当初用这流程做了3个项目，从“博客评论”到“商品查询”，都没出大问题。你要是按这些步骤试了，遇到“参数乱码”“请求失败”的情况，随时来留言，我帮你排查！

对了，现在很多人用fetch代替XMLHttpRequest（比如fetch(url).then(res => res.json()).then(data => console.log(data))），代码更简洁，但兼容性差点（IE不用），新手可以先把基础的XMLHttpRequest学会，再学fetch也不迟～

本文常见问题（FAQ）

Ajax Get请求的核心步骤是什么？

Ajax Get请求的核心逻辑就是通过浏览器内置的“信使”XMLHttpRequest对象，把要传的参数拼在URL后面发给服务器，再接收服务器的响应结果。具体拆成5步：先创建XMLHttpRequest对象当“信使”，然后把参数按“?参数名=值&参数名=值”的规则拼到URL里（中文要编码），接着用open方法配置请求方式、地址和异步，再调用send方法发送请求，最后监听onreadystatechange事件处理服务器的响应。

Ajax Get请求总读缓存拿不到新数据怎么办？

这是因为浏览器会缓存之前请求过的URL，下次再发同样的请求就直接读缓存了。解决办法很简单，在URL后面加个随机数就行，比如加“&t=Math.random()”或者“&t=new Date().getTime()”，这样每次URL都不一样，浏览器就不会读缓存了。我之前帮朋友做博客搜索功能时，就是用这招解决了缓存问题，刷新后能拿到最新的搜索结果。

Ajax Get请求参数太长会有什么问题？怎么解决？

不同浏览器对URL的长度有上限，比如IE最多支持2083个字符，Chrome是8192个字符，如果参数太长超过这个限制，服务器会直接拒绝请求，导致提交失败。所以Get请求适合传小数据，比如查询关键词、用户ID这类；如果要传大数据（比如长文本内容、图片信息），得换成Post请求，Post请求没有参数长度的限制。我之前做文章编辑功能时，一开始用Get传文章内容，结果超过长度限制报错，后来换成Post就好了。

Ajax Get请求传中文参数乱码怎么处理？

中文参数直接拼在URL里会乱码，得用encodeURIComponent()函数把中文包裹起来，比如“username=encodeURIComponent(‘张三’)”，这样中文会被编码成“%E5%BC%A0%E4%B8%89”这种安全字符，服务器那边再用对应的方法解码（比如PHP的urldecode()、Java的URLDecoder.decode()）就能拿到正确的中文了。我之前帮邻居做社区便民查询页时，没编码中文参数，结果服务器收到的是乱码，查了半小时才发现漏了这步，补上后就正常了。

Ajax Get请求需要兼容老浏览器（比如IE6）吗？怎么处理？

现在99%的用户都用Chrome、Edge这类现代浏览器，一般不用特意兼容老浏览器。但如果你的项目需要支持IE6及以下版本，就得用ActiveXObject(“Microsoft.XMLHTTP”)来创建对象，可以加个判断语句：var xhr = window.XMLHttpRequest ? new XMLHttpRequest() new ActiveXObject(“Microsoft.XMLHTTP”);。我之前帮邻居做查询页时，没加这个判断，结果他用旧电脑打开时直接报错，后来补上这个判断就解决了兼容问题。

YUANLEISVIP

收藏 链接