您现在的位置: 365建站网 > 365学习 > JQuery与Ajax常用代码[转]

JQuery与Ajax常用代码[转]

文章来源:365jz.com     点击数:418    更新时间:2009-10-05 21:46   参与评论
传统ajax
<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方法

 


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

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>

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (418人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------