jQuery---Ajax相关API基本使用！！！

最新推荐文章于 2021-04-22 15:36:03 发布

帅帅邬同学

最新推荐文章于 2021-04-22 15:36:03 发布

阅读量207

点赞数 4

分类专栏： jQuery 学习笔记服务器与AJAX 文章标签： js php javascript ajax jquery

本文链接：https://blog.csdn.net/weixin_44586544/article/details/106033134

版权

学习笔记同时被 3 个专栏收录

111 篇文章 0 订阅

订阅专栏

服务器与AJAX

21 篇文章 0 订阅

订阅专栏

jQuery

12 篇文章 0 订阅

订阅专栏

先来看一个例子

需求：页面输入图书编号，查询服务器端的图书信息并且解析渲染

前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    #container {
      width: 360px;
      min-height: 100px;
      background-color: lightgreen;
      position: absolute;
      left: 50%;
      top: 10px;
      margin-left: -180px;
    }
  </style>
  <script type="text/javascript" src="./jquery.js"></script>
  <script type="text/javascript">
    /*
    jQuery-ajax相关API基本使用
    */
    window.onload = function () {
      var btn = document.getElementById('btn');
      btn.onclick = function () {
        var code = document.getElementById('code').value;
        $.ajax({
          type: 'post',
          // url: './11.php?code=' + code,
          // get 和 post 请求都支持，下面这样传参，上面的方式 只适合 get，它会根据上面的 type进行判断，如果是 get，他会帮你
          // 加上 ？的
          url: './11.php', 
          data: { 
            code: code
          },
          dataType: 'json', //xml json text html script jsonp
          // 形参最好使用 response
          success: function (data) {
            var info = document.getElementById('info');
            if (data.flag == 0) {
              info.innerHTML = '没有这本书';
            } else {
              var tag = '<ul><li>书名：' + data.bookname + '</li><li>作者：' + data.author + '</li><li>描述：' + data
                .desc + '</li></ul>';
              info.innerHTML = tag;
            }
          }
        });
      }
    }
  </script>
</head>

<body>
  <div id="container">
    <div>
      图书编码：
      <input type="text" name="code" id="code">
      <input type="button" value="查询" id="btn">
    </div>
    <div id="info"></div>
  </div>
</body>

</html>

PHP代码：

<?php
// $code = $_GET['code'];
$code = $_POST['code'];

$books = array();
$books['sgyy'] = array('bookname' => '三国演义', 'author' => '罗贯中', 'desc' => '一个杀伐纷争的年代');
$books['shz'] = array('bookname' => '水浒传', 'author' => '施耐庵', 'desc' => '108条好汉的故事');
$books['xyj'] = array('bookname' => '西游记', 'author' => '吴承恩', 'desc' => '佛教与道教的斗争');
$books['hlm'] = array('bookname' => '红楼梦', 'author' => '曹雪芹', 'desc' => '一个封建王朝的缩影');
// 这里的array_key_exists用来判断数组中没有对应键
if (array_key_exists($code, $books)) {
  $book = $books[$code]; //这里根据参数获取一本书的信息
  echo json_encode($book);
} else {
  // 返回一个 json格式的字符串
  echo '{"flag":0}';
}

// echo $qq;

显示效果如下：

再来看下这个版本的前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    #container {
      width: 360px;
      min-height: 100px;
      background-color: lightgreen;
      position: absolute;
      left: 50%;
      top: 10px;
      margin-left: -180px;
    }
  </style>
  <script type="text/javascript" src="./jquery.js"></script>
  <script type="text/javascript">
    /*
    jQuery-ajax相关API基本使用
    */
    $(function () {
      $("#btn").click(function () {
        var code = $("#code").val();
        $.ajax({
          type: 'get',
          url: './11.php',
          data: {
            code: code
          },
          dataType: 'json',
          success: function (data) {
            if (data.flag == 0) {
              $("#info").html("该图书不存在");
            } else {
              var tag = '<ul><li>书名：' + data.bookname + '</li><li>作者：' + data.author + '</li><li>描述：' +
                data.desc + '</li></ul>';
              $("#info").html(tag);
            }
          },
          error: function (data) {
            console.dir(data);
            $("#info").html("服务器发生错误，请与管理员联系");
          }
        });
      });
    });
  </script>
</head>

<body>
  <div id="container">
    <div>
      图书编码：
      <input type="text" name="code" id="code">
      <input type="button" value="查询" id="btn">
    </div>
    <div id="info"></div>
  </div>
</body>

</html>

PHP代码：

<?php
// $code = $_GET['code'];
$code = $_POST['code'];

// 服务端输出一个不存在的变量
echo $qq;

相比于上面而言，这个版本多了一个错误处理的回调函数！！！我们可以让服务端发生错误，看一下显示结果。

显示结果
如果这篇文章能够帮助到你，希望您不要吝惜点赞，您的支持是我继续努力的动力！！！

帅帅邬同学

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery---Ajax相关API基本使用！！！

先来看一个例子需求：页面输入图书编号，查询服务器端的图书信息并且解析渲染前端代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #container { width: 360px; min-hei
复制链接

扫一扫