完整的案例效果如下,在浏览器中用网络地址打开网页,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
  • 公众号:前方录
  • 有什么不懂的地方欢迎联系我,帮到你是我会很开心

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注