JQuery_Ajax()基本应用

作者: 书中有凉气 | 来源:发表于2016-12-21 23:08 被阅读0次

JQuery_Ajax()基本应用
Jquery_ajax
JQuery_AJAX
jQuery_ajax报错：Uncaught TypeError
1、Selenium -- 环境配置与基本用法
MapKit使用
iOS MPMoviePlayerController的基本知识
谷粒商城-微博登录
Linux基本应用
注解基本应用

源码：
JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>renwu26-3</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</head>
<style>
    .line{
        height: 30px;
        line-height: 30px;
        border: 1px solid grey;
        border-radius: 5px;
        padding: 10px;
        margin: 5px;
    }
    .button{
        padding: 5px;
        width: 80px;
        border-radius: 5px;
        margin: 5px;
        outline-style: none;
    }
    .hover{
        background-color: #6fc;
    }
</style>
<body>
    <div class="line">1</div>
    <div class="line">2</div>
    <button class="button">click</button>
    <script>
        /*
        接口
        1.url;
        2.get,post
        3.输入：
        {
            start：2，
            length：6
        }
        4.输出:
        {
            status：1 --OK
            data：[3,4,5,6,7,8]

            status：0 --ERROR
        }
        */
$('.button').on('click', function(){
        $.ajax(
            {
                url:'http://localhost/renwu26-3.php',
                dataType:'json',
                type:'get',
                data:{
                    start:$('.line').length,
                    len:6
                },
                success:function(json){
                    onSuccess(json);
                },
                error:function(){
                    onError();
                },
            }
        );
        function onSuccess(json){
            if(json.status==1){
                append(json.data);
            }
            else{
                alert('获取失败');
            }
        };
        function onError(){
            alert('链接失败');
        };

        function append(arr){
            for(var i=0;i<arr.length;i++){
                $('.line:last').after('<div class="line">'+arr[i]+'</div>');
            }
        };
})

$('body').on('mouseenter', 'div', function(){
    $(this).addClass('hover');
    console.log(1);
})
$('body').on('mouseleave', 'div', function(){
    $(this).removeClass('hover');
})

    </script>
</body>
</html>

php:

<?php
    // 后端 php 测试接口文件
    $start = $_GET['start']; //2
    $len = $_GET['len'];  //6 
    $items = array();
 
    for($i = 1; $i < $len; $i++){
        array_push($items, ($start+$i));
    }
    $ret = array('status'=>1, 'data'=>$items);

    //{status: 1, data: ['内容1','内容2','内容3']}
    sleep(0.5);
    echo json_encode($ret);
?>