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

先来看一个例子

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

前端代码:


<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <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 = '
  • 书名:' + data.bookname + '
  • 作者:' + data.author + '
  • 描述:' + data .desc + '
'
; 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代码:


// $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;

显示效果如下:
jQuery---Ajax相关API基本使用 !!!_第1张图片

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


<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <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 = '
  • 书名:' + data.bookname + '
  • 作者:' + data.author + '
  • 描述:' + data.desc + '
'
; $("#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代码:


// $code = $_GET['code'];
$code = $_POST['code'];

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

相比于上面而言,这个版本多了一个 错误处理的回调函数 !!!我们可以让服务端发生错误,看一下显示结果 。
jQuery---Ajax相关API基本使用 !!!_第2张图片

jQuery---Ajax相关API基本使用 !!!_第3张图片
如果这篇文章能够帮助到你,希望您不要吝惜点赞 ,您的支持是我继续努力的动力 !!!

你可能感兴趣的:(jQuery,学习笔记,服务器与AJAX)