Ajax常用方法

ajax请求的过程：
1.创建XML对象
2.打开服务器链接open
3.发送请求send
4.接受服务器响应

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
    .red{color:red;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    function getlpcase(){
        $.ajax({
            url:"../loupan_ajax.php",
            type:'GET',
            data: {action:'getLoupan',ip:''},
            datatype:'json',
            success:function(data){
                    var _data = JSON.parse(data);
                    console.log(_data);
                    var html_txt = '';
                    for(var o in _data.lp_data){

                        if(_data.lp_data[o].loupan_doors>500){
                            html_txt +='<a href="http://sjq.homekoo.com/thread-'+_data.lp_data[o].thread_id+'-1-1.html" target="_blank" class="red">'+_data.lp_data[o].loupan_name+'</a><br>';
                        }else{
                            html_txt +='<a href="http://sjq.homekoo.com/thread-'+_data.lp_data[o].thread_id+'-1-1.html" target="_blank">'+_data.lp_data[o].loupan_name+'</a><br>';
                        }
                        $('.box').html(html_txt);
                    }
            }
        })
    }
    getlpcase();
</script>
</html>

2. $.post() 常用的参数： url:请求的地址 data:发送的数据 success:回调函数 dataType:数据类型 3.$ .get()
常用的参数：
url:请求的地址
data:发送的数据
success:回调函数
dataType:数据类型

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="jquery-1.11.0.min.js"></script>
    <style>
    .red{color:red;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    function getlpcase(){
        $.get("../ajax.php",{action:'moveLp'},"html",function(data){
                $('.box').html(data)
            }
        )
    }
    getlpcase();
</script>
</html>

get和post的区别：get数据大小限制在1kb,而且get会把数据追加到URL中，get会被浏览器缓存起来别人可以在浏览记录中读取到数据，因此不安全。post反之。
4.$(sel).load();
请求文档内容并插入到里面
URL:请求的地址
data:数据
function:返回后要做的动作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="jquery-1.11.0.min.js"></script>
    <style>
    .red{color:red;}
    </style>
</head>
<body>
    <div class="con"></div>
</body>
<script>
    $('.con').load('dome.html .box',function(response,status,xhr){
        console.log(status)
    })
</script>
</html>

5.serialize()
序列化表单元素，返回name1=value1&name2=value2….

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>
<body>
    <div class="box">
            <form action="">
                <input type="text" id='a' name='a'/>
                <input type="text" id='b' name='b'/>
                <select id="c" name='c'>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
                <input type="radio" id='d' name='d' value="8" />
                <input type="button"/>
            </form>
    </div>
</body>
<script>
$('input[type=button]').click(function(){
    document.write($('form').serialize())
})
</script>
</html>

6.serializeArray()
将表单序列化为json数组

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>
<body>
    <div class="box">
            <form action="">
                <input type="text" id='a' name='a'/>
                <input type="text" id='b' name='b'/>
                <select id="c" name='c'>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
                <input type="radio" id='d' name='d' value="8" />
            </form>
        <input type="button"/>
    </div>
</body>
<script>
$('input[type=button]').click(function(){
    document.write(JSON.stringify(($('form').serializeArray())))
})
</script>
</html>

将表单直接序列化为json格式的插件

    (function($){
        $.fn.serializeJson=function(){
            var serializeObj={};
            var array=this.serializeArray();
            var str=this.serialize();
            $(array).each(function(){ if(serializeObj[this.name]){ if($.isArray(serializeObj[this.name])){ serializeObj[this.name].push(this.value); }else{ serializeObj[this.name]=[serializeObj[this.name],this.value]; } }else{ serializeObj[this.name]=this.value; } });
            return serializeObj;
        };
    })(jQuery);

JSON.parse(str)将json字符串转成json对象
JSON.stringify(str)将json对象转为json字符

7.$.when().done()
同时发送ajax请求，不会等第一个返回后再发送第二个，当两个请求都成功后执行done

<script>
    $.when($.ajax('page1.php'),$.ajax('page2.php')).done(function(data1,data2){
        document.write(data1)//第一个请求返回的数据
        document.write(data2)//第二个请求返回的数据
    })
</script>

原创地址：http://www.w3cfuns.com/notes/18316/637bcf6e4f950d109c683e0876c307fa.html

猜你喜欢