jQuery框架ajax相关api基本操作_ajax api怎么用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43750162/article/details/98480030

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #continer{
    width: 360px;
    min-height: 100px;
    background-color: lightblue;
    position: absolute;
    left: 50%;
    top: 20px;
    margin-left: -180px;
   }
  </style>
  <script src="ajax.js" type="text/javascript" charset="utf-8"></script>
  <script src="jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   window.onload=function(){
    var btn=document.getElementById('btn');
    btn.onclick=function(){
     var code=document.getElementById('code').value;
     $.ajax({
      type:"post", // 请求的方式
      url:"01.php", // 请求的路径
      data: {code:code},   //  请求的数据
      dataType:'json', //请求数据的类型
      async:true，  // 是否异步     不添加这行代码 默认的异步请求
      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;
       }
      },
      //文件未被找到时执行的函数
      error:function(data){
       $('#info').html('服务器发生错误,请于管理员联系');
      }
     });
    }
   }
  </script>
 </head>
 <body>
  <div id="continer">
   <div>
    图书标号:
    <input type="text" name="code" id="code" />
    <input type="button" name="btn" id="btn" value="查询" />
   </div>
   <div id="info"></div>
  </div>
 </body>
</html>

php代码

<?php
 // 获取code 的图书标号
 $code=$_POST['code'];
 $arr=array();
 $arr['hlm'] = array('bookname'=>'红楼梦','author'=>'曹雪芹','desc'=>'好几个家族的黑幕' );
 $arr['shz'] = array('bookname'=>'水浒传','author'=>'施耐庵','desc'=>'108将  梁山好汉' );
 $arr['xyj'] = array('bookname'=>'西游记','author'=>'吴承恩','desc'=>'四个和尚取经的故事' );
 $arr['sgyy'] = array('bookname'=>'三国演义','author'=>'罗贯中','desc'=>'三国鼎立' );
 if(array_key_exists($code, $arr)==1){
  $book=$arr[$code];
  echo json_encode($book); // 将获取到的数据转换为json字符串
 }else{
  echo '{"flag":0}';
 }
?>