2种方式实现局部刷新

最新推荐文章于 2024-07-14 16:00:00 发布

齐玉林

最新推荐文章于 2024-07-14 16:00:00 发布

阅读量3.2k

点赞数

分类专栏： js 文章标签：局部刷新 ajax

本文链接：https://blog.csdn.net/qilin001cs/article/details/50130717

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.是使用iframe的方式嵌入到html页面中，使用form做提交，target设为iframe的name
html:

<iframe name="info" id="info" frameborder="0"   src=""  scrolling="no" width="100%" height="1000"></iframe>

form:

<span style="font-size:14px;"><form id="mapForm" name="mapForm" action="" method="post" target="info">  </span>

2.使用ajax。以div域的局部刷新为例，假设

<div id="mapDiv" name="mapDiv">

发起js的ajax请求或者使用jquery的get,post都是一样的,在回调方法中
document.getElementById("mapDiv").innerHTML =回调内容;

例如JQuery:

$.get(url,function(res){
   $("#mapDiv").html(res);
})

而用JS：

var XMLHttpReq;  
function createXMLHttpRequest() {  
    try {  
        XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");//IE高版本创建XMLHTTP  
    }  
    catch(E) {  
        try {  
            XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE低版本创建XMLHTTP  
        }  
        catch(E) {  
            XMLHttpReq = new XMLHttpRequest();//兼容非IE浏览器，直接创建XMLHTTP对象  
        }  
    }  
  
}  
function sendAjaxRequest(url) {  
    createXMLHttpRequest();                                //创建XMLHttpRequest对象  
    XMLHttpReq.open("post", url, true);  
    XMLHttpReq.onreadystatechange = processResponse; //指定响应函数  
    XMLHttpReq.send(null);  
}  
//回调函数  
function processResponse() {  
    if (XMLHttpReq.readyState == 4) {  
        if (XMLHttpReq.status == 200) {  
            var text = XMLHttpReq.responseText;  
            //回调相应内容
           document.getElementById("mapDiv").innerHTML =text
        }  
    }  
  
}