完整的案例效果如下,在浏览器中用网络地址打开网页,get效果请看下面两张图
点击下图按钮;
按钮点击后,获取下图列表内容
完整的案例效果如下,在浏览器中用网络地址打开网页,post发送效果请看下面两张图
在表单中输入信息,点击下图 提交;
按钮提交后,调试窗口会显示对应的内容。如下图
上述效果实现代码如下
1.1.html文档
新建一个文档,把下面代码复制到文档中
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>ajax封装</title> </head> <body> <input type="button" value="按钮" id="btn"> <ul id="ul"></ul> <form action=""> <input type="text" name="username" id="username"> <input type="text" name="age" id="age"> <input type="submit" id="sub"> </form> <script> sub.onclick = function (e) { e.preventDefault(); var usVal = username.value; var ageVal = age.value; ajaxFunc(postData, 'POST', './post.php', 'username='+ usVal +'&age=' + ageVal, true) } btn.onclick = function () { ajaxFunc(showList, 'GET', './getNews.php', '', true); ajaxFunc(postData, 'POST', './post.php', 'username=ai&age=21', true); } function ajaxFunc(callback, method, url, data, flag) { var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject('Microsoft.XMLHttp'); } if (method == 'POST') { xhr.open('POST', url + '?' + data, flag); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send(data); } else if (method == "GET") { xhr.open(method, url, flag); xhr.send(); } xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { callback(xhr.responseText); } } } } function showList(data) { var d = JSON.parse(data); var str = ''; d.forEach(function (ele, index, arr) { str += '<li>' + ele.title + ' ' + ele.date + '</li>'; }) ul.innerHTML = str; } function postData(data) { console.log(data); } </script> </body> </html>
1.2.post.php文档
新建一个文档,把下面代码复制到文档中
<?php header('content-type:text/html;charset="utf-8"'); error_reporting(0); $username = $_POST['username']; $age = $_POST['age']; echo "名字: {$username}, 年龄: {$age}"; ?>
1.3.getNews.php文档
新建一个文档,把下面代码复制到文档中
<?php header('content-type:text/html;charset="utf-8"'); error_reporting(0); $news = array( array('title'=>'德国女总理默克尔滑雪时摔倒 骨盆断裂','date'=>'2014-1-6'), array('title'=>'中日驻英外交官撰文互称对方国家为"伏地魔"','date'=>'2014-1-6'), array('title'=>'安倍:望与中国领导人会面 中方:你关闭了大门','date'=>'2014-1-6'), array('title'=>'揭秘台湾驻港间谍网运作 湖北宜昌副市长被查','date'=>'2014-1-6'), array('title'=>'习近平:嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'), array('title'=>'习近平:嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'), array('title'=>'习近平:嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'), array('title'=>'习近平:嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'), array('title'=>'习近平:嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'), array('title'=>'中国长达13年游戏机禁令正式解除 外企可进入','date'=>'2014-1-6'), array('title'=>'70种证件伴中国人一生:领养老金要办生存证明','date'=>'2014-1-6'), array('title'=>'德国女总理默克尔滑雪时摔倒 骨盆断裂','date'=>'2014-1-6'), array('title'=>'中日驻英外交官撰文互称对方国家为"伏地魔"','date'=>'2014-1-6'), array('title'=>'安倍:望与中国领导人会面 中方:你关闭了大门','date'=>'2014-1-6'), array('title'=>'揭秘台湾驻港间谍网运作 湖北宜昌副市长被查','date'=>'2014-1-6'), ); echo json_encode($news); ?>
现在完整的代码己经记录完毕了,以后再也不用担心找不到代码了,可以随查随用了。
博主联系方式:
- 微信:34419369
- QQ: 34419369
- 公众号:前方录
- 有什么不懂的地方欢迎联系我,帮到你是我会很开心