您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > JQuery與Ajax常用代碼[轉(zhuǎn)]

JQuery與Ajax常用代碼[轉(zhuǎn)]

文章來(lái)源：365jz.com 點(diǎn)擊數(shù)：470 更新時(shí)間：2009-10-05 21:46 參與評(píng)論

傳統(tǒng)ajax

JQuery方法

get and post

<title>GET VS. POST</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function createQueryString(){
    var firstName = encodeURI($("#firstName").val());
    var birthday = encodeURI($("#birthday").val());
    //組合成對(duì)象的形式
    var queryString = {firstName:firstName,birthday:birthday};
    return queryString;
}
function doRequestUsingGET(){
    $.get("14-5.aspx",createQueryString(),
        //發(fā)送GET請(qǐng)求
        function(data){
            $("#serverResponse").html(decodeURI(data));
        }
    );
}
function doRequestUsingPOST(){
    $.post("14-5.aspx",createQueryString(),
        //發(fā)送POST請(qǐng)求
        function(data){
            $("#serverResponse").html(decodeURI(data));
        }
    );
}
</script>
</head>

<body>
<h2>輸入姓名和生日</h2>
<form>
    <input type="text" id="firstName" /><br>
    <input type="text" id="birthday" />
</form>
<form>
    <input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
    <input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>

控制ajax

<title>$.ajax()方法</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function createQueryString(){
    //必須兩次編碼才能解決中文問(wèn)題
    var firstName = encodeURI(encodeURI($("#firstName").val()));
    var birthday = encodeURI(encodeURI($("#birthday").val()));
    //組合成對(duì)象的形式
    var queryString = "firstName="+firstName+"&birthday="+birthday;
    return queryString;
}
function doRequestUsingGET(){
    $.ajax({
        type: "GET",
        url: "14-5.aspx",
        data: createQueryString(),
        success: function(data){
            $("#serverResponse").html(decodeURI(data));
        }
    });
}
function doRequestUsingPOST(){
    $.ajax({
        type: "POST",
        url: "14-5.aspx",
        data: createQueryString(),
        success: function(data){
            $("#serverResponse").html(decodeURI(data));
        }
    });
}
</script>
</head>

<body>
<h2>輸入姓名和生日</h2>
<form>
    <input type="text" id="firstName" /><br>
    <input type="text" id="birthday" />
</form>
<form>
    <input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
    <input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>

全局設(shè)置ajax

<title>$.ajaxSetup()方法</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$.ajaxSetup({
    //全局設(shè)定
    url: "14-5.aspx",
    success: function(data){
        $("#serverResponse").html(decodeURI(data));
    }
});
function createQueryString(){
    //必須兩次編碼才能解決中文問(wèn)題
    var firstName = encodeURI(encodeURI($("#firstName").val()));
    var birthday = encodeURI(encodeURI($("#birthday").val()));
    //組合成對(duì)象的形式
    var queryString = "firstName="+firstName+"&birthday="+birthday;
    return queryString;
}
function doRequestUsingGET(){
    $.ajax({
        data: createQueryString(),
        type: "GET"
    });
}
function doRequestUsingPOST(){
    $.ajax({
        data: createQueryString(),
        type: "POST"
    });
}
</script>