通过IFRAME实现页面局布刷新

        局布刷新现在应该说是很流行，实现局布刷新有很多种方法例如AJAX（异步传送）,Iframe...等很多种方式，页面局布刷新的好处在这里我想大家都很轻松，这里简单说一下，就不做为本贴主要叙述的内容了。局布刷新故名诗意就是针对页面某一部分进行刷新响应相应的事件，例如：注册会员信息时，检测用户名是否存在这时就需要响应一个检测userID是否存在的事件，在以前我们在开发WEB应用程序时经常时整个页面进行刷新，例如表单里已经填写了部分数据信息，刷新后之前填写的数据信息一无所有，这也是作为用户最为反感的事情，当然你可以通过SESSION,COOKIES...等对象来保留用户之前填写的数据，但这样也往往需要“发送请求->响应请求->返回请求”，这样的一个过程，这样往往的降低的WEB应用程序的执行效率，没有用户希望在那苦苦的等待这一分一秒的时间。

        在AJAX这个词语没有出现的时候已经有很多技术可以弥补WEB应用程序页面刷新的不足了，当然这里有通过JS传递参数控制iframe框架来实现局布页面刷新，解决这样的问题。下面我来介绍一下通过IFRAME实现局布刷新，结合页面部分功能来实现更加人性化，灵活的WEB应用程序，不多说了，下面我来介绍一下我是怎么做的：

<spanid="carPrice"style="display:none">
<iframe.src="estimate_iframe.html"name="iframeEstimate"border="0"width="645"height="232"
   frameborder="no"style="overflow:hidden"></iframe>
</span>

上面这段iframe不需要我多做解释吧，大家应该很熟悉iframe标签的这些基本参数。页面加载时需要通过图层将iframe标签隐藏，通过CSS样式表

<inputname="cy_selectCar"style="border:0"type="radio"onclick='goImageSelect(this)'value="Q / Q45"carID='Q45'/>Q / Q45 
<inputname="cy_selectCar"style="border:0"type="radio"onclick='goImageSelect(this)'value="M / M35"carID='M35'/>Q / M35
<inputname="cy_selectCar"style="border:0"type="radio"onclick='goImageSelect(this)'value="M / M45"carID='M45'/>Q / M45

这里通过单选按钮radio来控制调用'goImageSelect(this)'函数this表示当前元素下面是goImageSelect 这段脚本.

<script language="JavaScript">
function goImageSelect(obj) {
    var imgName1 = obj.value;    
    if (imgName1 != "") {
        document.all["carPrice"].style.display = "block";
        var carID = obj.carID;
        carIDValue(carID);
    } 
}

function carIDValue(num) {
    document.carForm.carID.value = num;
    document.carForm.action = 'estimate_iframe.php';
    document.carForm.target='iframeEstimate' ;
    document.carForm.submit();
}
</script>

<form. name="carForm"method="post"nsubmit="return false" frameborder="no">
  <input type="hidden" name="carID" value="">
</form>

很明显这段脚本是把隐藏的图层显示出来，获取carID属性的值，将其值传到carIDValue 函数中提交表单  carForm设定<input type="hidden" name="carID" value="">隐藏域的值 这样就可以知道具体是执行的那个radio 按钮了。（因为每个carID 值不同，这里只举3个radio 按钮为例，以此类推）

estimate_iframe.php 在看看PHP文件里是怎么解吸的。大家不要想得很复杂，其实很简单，通过JS控制表单提交文件及显示区域。

//# by gaoming 2007-07-10

$carID = $_REQUEST['carID'];

switch ($carID) {
    case "Q45" : 
        $str_price = "105,500,000 ";
        $str_carNum_costs = "9,000 ";
        $str_tax = "4,795,450 ";
        $str_proof = "5,000 ";
        $str_Bond_costs    ="3,836,360 ";
        $str_income_tax     ="1,918,180 ";
        $str_total    ="116,063,990 ";
        $car_images = $url['main_skin']."images/ride_car_Q.gif";
        break;
    case "M35" : 
        $str_price = "63,900,000 ";
        $str_carNum_costs = "9,000 ";
        $str_tax = "2,904,540 ";
        $str_proof = "5,000 ";
        $str_Bond_costs    ="2,316,360 ";
        $str_income_tax     ="1,161,820 ";
        $str_total    ="70,296,720 ";
        $car_images = $url['main_skin']."images/ride_car_m.gif";
        break;
    case "M45" : 
        $str_price = "81,100,000 ";
        $str_carNum_costs = "9,000 ";
        $str_tax = "3,686,360 ";
        $str_proof = "5,000 ";
        $str_Bond_costs    ="2,949,090 ";
        $str_income_tax     ="1,474,540 ";
        $str_total    ="89,223,990 ";
        $car_images = $url['main_skin']."images/ride_car_m.gif";
        break;

}
echo $str_price;
echo ("<Br>");echo $str_carNum_costs;
echo ("<Br>");echo $str_tax;
echo ("<Br>");echo $str_proof;
echo ("<Br>");echo $str_Bond_costs;
echo ("<Br>");echo $str_income_tax;
echo ("<Br>");echo $str_total;
echo ("<Br>");echo $car_images;

1.jpg

2.jpg

演示地址：http://www.54php.com/myphp/test1/test.php

下载地址：http://www.54php.com/myphp/test1/test.rar