我是靠谱客的博主 害怕蛋挞,这篇文章主要介绍原生js和jQuery的AJAX实现,现在分享给大家,希望可以做个参考。

关于js和jQuery的AJAX实现,直接进入主题

1、原生js的AJAX实现,这里的后台是test.php,点击id为inputBox的时候便触发AJAX请求:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function getInfoByJs() {//原生js获取信息 var request=new XMLHttpRequest(); // request.open("GET","test.php?number="+document.getElementById("inputBox").value);//get方法向后台传值 通过url传输数据 request.open("POST","test.php"); //POST方法传值 var data="number="+document.getElementById("inputBox").value; //如果是get方式这里就不需要定义data request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gbk");//必须写的 千万注意!!! request.send(data); //如果是get方法就不需要send数据 用url的方式传输 request.onreadystatechange=function () { //事件监听 readyState改变的时候便会触发 if(request.readyState===4) { //当readyState变成4的时候说明响应内容解析完成,可以在客户端调用了 if (request.status === 200) { //当请求的status是200的时候表示后台页面正常访问 可以在接下来执行相应的操作了 // to do... //处理相应的业务逻辑 } else { alert("发生错误:" + request.status); //如果发生了错误 输出请求的状态码 } } } }

2、①jQuery的AJAX实现get请求,这里的后台是test.php,点击id为jqAjaxTestByGET的时候就会向AJAX触发AJAX请求:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function () { //当document加载完成 执行function这个匿名函数 GET测试 $("#jqAjaxTestByGET").click(function () { $.ajax({//以json 的形式传入参数 //使用jQuery的方式异步加载数据 使用GET方法 这样相当于给id为jqAjaxTest的标签添加了一个匿名函数 type:"GET", //get方法 url:"test.php?number="+$("#inputBox").val(), //如果是get方法的话 数据需要在url里进行传输 用拼接url的方式传输id为inputBox的值 //第一个参数以?符号传输 后面的以&符号继续拼接传输 比如 test.php?a=1&b=2&c=3  dataType:"json", //数据以json的形式进行传输 success:function () { alert("传输成功"); }, //传输成功执行的匿名函数 error:function (jqXHR) { //jqXHR是这个浏览器原生的XMLHttpRequest对象 alert("传输失败,错误码"+jqXHR.status); } //传输失败执行的匿名函数 }) }); //click触发的匿名函数结束 }); //ready触发的匿名函数结束
     ②jQuery的AJAX实现post请求,这里的后台是test.php,点击id为jqAjaxTestByPOST的时候就会向AJAX触发AJAX请求:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function () { //当document加载完成 执行function这个匿名函数 POST测试 $("#jqAjaxTestByPOST").click(function () { //使用jQuery的方式异步加载数据 使用POST方法 这样相当于给d为jqAjaxTest的标签添加了一个匿名函数 $.ajax({ type:"POST", //POST方法 url:"test.php", //如果是get方法的话 数据需要在url里进行传输 由于是POST 就不需要了 dataType:"json", //数据以json的形式进行传输 data:{ number:$("#inputBox").val() //data这里要写成前面dataType所对应的形式 }, success:function () { alert("传输成功"); }, //传输成功执行的匿名函数 error:function (jqXHR) { //jqXHR表示这个jQuery的XMLHttpRequest alert("传输失败,错误码"+jqXHR.status); } //传输失败执行的匿名函数 }) }); //click触发的匿名函数结束 }); //ready触发的匿名函数结束


最后

以上就是害怕蛋挞最近收集整理的关于原生js和jQuery的AJAX实现的全部内容,更多相关原生js和jQuery内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(99)

评论列表共有 0 条评论

立即
投稿
返回
顶部