jQuery案例笔记（七）+Ajax

案例：根据图书编号查询图书

php

<?php 
    $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) == 1){
        $book = $books[$code];//这里根据参数获取一本书的信息
        echo json_encode($book);
    }else{
        echo '{"flag":0}';
    }
 ?>   

css

<style type="text/css">
    #container {width: 360px;min-height: 100px;background-color: #b7d2ee;position: absolute;left: 50%;top: 10px;margin-left: -180px;}
</style>

div

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

（DOM中写法）

<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;//获取输入框中的value值
            $.ajax({
                type: 'post',
                // url: './11.php?code=' + code,
                url: './11.php',
                data : {code:code},
                dataType: 'json',
                success: function(data) {                    
                    var info = document.getElementById('info');
                    if (data.flag == 0) {//php中判断数据内没有对应键就输出0
                        info.innerHTML = '没有这本书';
                    } else {
                        var tag = '<ul><li>书名：' + data.bookname + '</li><li>作者：' + data.author + '</li><li>描述：' + data.desc + '</li></ul>';
                        info.innerHTML = tag;
                    }
                }
            });
        }
    }
</script>

写法二（jQuery写法）

<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(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);    //dir查看具体值
                    $("#info").html("服务器发生错误，请与管理员联系");
                }
            });
        });
    });
</script>

dataType：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据HTTP包MIME 信息来智能判断，比如XML MIME类型就被识别为XML。JSON就会生成一个JavaScrip对象， 而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

• "xml":返回 XML文档，可用jQuery 处理。
• "html":返回纯文本HTML信息:包含的script标签会在插入dom时执行。
• "script" ;返回纯文本JavaScript 代码。不会自动缓存结果。除非设责了"cache“参数。注意:”在远程请求时(不在同一 个域下)，所有POST
• 请求都将转为GET请求。因为将使用DOM的script标签来加载)
• "json':返回JSON数据。
• "jsonp": JSONP格式。使用JSONP 形式调用函数时，如” myurl?callback=?" jQuery将自动管换?为正确的函数名，以执行回调函数。
• "text":返回纯文本字符串

（本文为听课笔记）