您现在的位置： 365建站网 > 365文章 > JQuery与Ajax常用代码[转]

JQuery与Ajax常用代码[转]

文章来源：365jz.com 点击数：458 更新时间：2009-10-05 21:46 参与评论

传统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());
    //组合成对象的形式
    var queryString = {firstName:firstName,birthday:birthday};
    return queryString;
}
function doRequestUsingGET(){
    $.get("14-5.aspx",createQueryString(),
        //发送GET请求
        function(data){
            $("#serverResponse").html(decodeURI(data));
        }
    );
}
function doRequestUsingPOST(){
    $.post("14-5.aspx",createQueryString(),
        //发送POST请求
        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(){
    //必须两次编码才能解决中文问题
    var firstName = encodeURI(encodeURI($("#firstName").val()));
    var birthday = encodeURI(encodeURI($("#birthday").val()));
    //组合成对象的形式
    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>

全局设置ajax

<title>$.ajaxSetup()方法</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$.ajaxSetup({
    //全局设定
    url: "14-5.aspx",
    success: function(data){
        $("#serverResponse").html(decodeURI(data));
    }
});
function createQueryString(){
    //必须两次编码才能解决中文问题
    var firstName = encodeURI(encodeURI($("#firstName").val()));
    var birthday = encodeURI(encodeURI($("#birthday").val()));
    //组合成对象的形式
    var queryString = "firstName="+firstName+"&birthday="+birthday;
    return queryString;
}
function doRequestUsingGET(){
    $.ajax({
        data: createQueryString(),
        type: "GET"
    });
}
function doRequestUsingPOST(){
    $.ajax({
        data: createQueryString(),
        type: "POST"
    });
}
</script>