js原生ajax实例(post)

最新推荐文章于 2024-04-30 16:21:35 发布

cxb8888

最新推荐文章于 2024-04-30 16:21:35 发布

阅读量446

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/cxb8888/article/details/8724797

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在上一篇文章中，给大家分享了原生javascript的ajax，GET方式，

接下来顺道把post也分享了：

直接贴代码：

 
 <!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ajax_post</title> 
<script> 
function ajax(url,fnTip,fnSucc,FnFaild){ 
    var oAjax=null; 
    if(window.XMLHttpRequest){ 
        oAjax=new XMLHttpRequest(); 
    }else{ 
        oAjax=new ActiveXObject('Microsoft.XMLHTTP');    
    } 
    oAjax.open('POST',url,true); 
    oAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8"); 
    oAjax.send('keyword='+document.getElementById('t1').value); 
    if(fnTip)fnTip(); 
    oAjax.onreadystatechange=function(){ 
        if(oAjax.readyState==4){ 
            if(oAjax.status==200){ 
                if(fnSucc){fnSucc(oAjax.responseText)}; 
            }else{ 
                if(FnFaild)FnFaild();    
            } 
        }    
    }    
} 
function insertAfter(newElement,targetElement){  
    var parent=targetElement.parentNode;  
    if(parent.lastChild == targetElement){  
        parent.appendChild(newElement);  
    }else{  
        parent.insertBefore(newElement,targetElement.nextSibling);    
    }  
}  
window.onload=function(){ 
    var oT=document.getElementById('t1'); 
    var oBtn=document.getElementById('btn'); 
    var oTip=document.getElementById('tip'); 
    oBtn.onclick=function(){ 
        oTip.innerHTML=''; 
        ajax('test.php',function(){ 
            oBtn.setAttribute('disabled','true'); 
            var oImg=document.createElement('img'); 
            oImg.src='loading.gif'; 
            oImg.id='loading'; 
            insertAfter(oImg,oT); 
            oT.value=''; 
        },function(str){ 
            oBtn.removeAttribute('disabled'); 
            document.body.removeChild(document.getElementById('loading')); 
            oTip.innerHTML='您搜索的东西为:<b>'+str+'</b>'; 
        },function(){ 
            alert('error');  
        });  
    }    
} 
</script> 
</head> 
 
<body> 
<input type="text" id="t1" name="keyword" /><span id="tip"></span><br/> 
<input type="button" id="btn" value="click search" /> 
</body> 
</html>