JQuery与Ajax常用代码

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_30747253

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量46

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xumingming/archive/2009/09/17/1568200.html

本文介绍了传统的Ajax请求实现方式及其简化版JQuery方法，并对比了GET与POST请求的不同应用场景，还展示了如何使用$.ajax()方法进行更复杂的Ajax操作及全局设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

传统ajax

Code
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
    if(window.ActiveXObject)
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    else if(window.XMLHttpRequest)
        xmlHttp = new XMLHttpRequest();
}
function startRequest(){
    createXMLHttpRequest();
    xmlHttp.open("GET","14-1.aspx",true);
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
            document.getElementById("target").innerHTML = xmlHttp.responseText;
    }
    xmlHttp.send(null);
}
</script>

JQuery方法

Code
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function startRequest(){
$("#target").load("14-1.aspx");
}
</script>

get and post

Code
<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

Code
<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

Code
<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>

转载于:https://www.cnblogs.com/xumingming/archive/2009/09/17/1568200.html