首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

实现无刷新联动例子汇总

Posted in Javascript onMay 20, 2015

Iframe实现无刷新联动

iframe的无刷新其实是局部刷新，状态栏的滚动条还是会滚动，只是页面不会闪烁，这是一种比较老的技术了，在处理的数据两大的时候会比较慢，在本例中需要两个页面：index.aspx和frame.asapx,index.aspx用来显示界面，其中有一个iframe标记，指向frame.aspx页用来显示结果
index.aspx前台代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>无标题页</title>

  <script type="text/javascript">
    function Query() {
      var ddlpro = document.getElementById('ddlPro');
      var pro = ddlpro.options[ddlpro.selectedIndex].innerText;
      if (pro != "") {
        document.getElementById("iframe1").src = "frame.aspx?Pro=" + pro;
      }
    }

  </script>

</head>
<body>
  <form id="form2" runat="server">
  <div>
    <table border="1" cellpadding="3" cellspacing="0" width="600px">
      <tr>
        <td colspan="2" align="center">
          Iframe实现局部刷新
        </td>
      </tr>
      <tr>
        <td>
          省份名称:
        </td>
        <td>
          <select id="ddlPro" style="width: 201px">
            <option value="湖北">湖北</option>
            <option value="河北">河北</option>
            <option value="广东">广东</option>
            <option value="河南">河南</option>
          </select>
          <input id="Button3" type="button" value="查询" onclick="Query()" />
        </td>
      </tr>
      <tr>
        <td>
          显示城市列表
        </td>
        <td>
          <iframe src="frame.aspx" style="text-align: center" id="iframe1" width="100%"
            height="100%" frameborder="0" scrolling="no" />
        </td>
      </tr>
    </table>
  </div>
  </form>
</body>
</html>

frame.aspx的前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="frame.aspx.cs" Inherits="myframe" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>无标题页</title>
</head>
<body>
  <form id="form2" runat="server">
  <div>
    <asp:DropDownList ID="ddlCity" runat="server" Width="179px">
    </asp:DropDownList>
  </div>
  </form>
</body>
</html>

frame.aspx后台代码：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class myframe : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    string pro = Request.QueryString["pro"];
    switch (pro)
    {
      case "湖北":
        this.ddlCity.Items.Clear();
        this.ddlCity.Items.Add("武汉");
        this.ddlCity.Items.Add("黄冈");
        this.ddlCity.Items.Add("黄石");
        this.ddlCity.Items.Add("襄樊");
        break;
      case "河北":
        this.ddlCity.Items.Clear();
        this.ddlCity.Items.Add("石家庄");
        this.ddlCity.Items.Add("唐山");
        this.ddlCity.Items.Add("承德");
        this.ddlCity.Items.Add("邯郸");
        break;
      case "广东":
        this.ddlCity.Items.Clear();
        this.ddlCity.Items.Add("广州");
        this.ddlCity.Items.Add("佛山");
        this.ddlCity.Items.Add("深圳");
        this.ddlCity.Items.Add("珠海");
        break;
      case "河南":
        this.ddlCity.Items.Clear();
        this.ddlCity.Items.Add("郑州");
        this.ddlCity.Items.Add("新乡");
        this.ddlCity.Items.Add("安阳");
        this.ddlCity.Items.Add("信阳");
        break;

    }
  }
}

JavaScript无刷新联动

前台页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="jacascript_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>无标题页</title>

  <script type="text/javascript">
    function FillData(strcity) {

      document.getElementById("ddlCity").options.length = 0;
      var indexofcity;
      var city;
      while (strcity.length > 0) {
        indexofcity = strcity.indexOf(",");
        if (indexofcity > 0) {
          city = strcity.substring(0, indexofcity);

          strcity = strcity.substring(indexofcity + 1);
          document.getElementById("ddlCity").add(new Option(city, city));
        }
        else {
          document.getElementById("ddlCity").add(new Option(strcity, strcity));
          break;
        }

      }
    }
  </script>

</head>
<body>
  <form id="form2" runat="server">
  <div>
    <table width="700px" border="1" cellpadding="5" cellspacing="0">
      <tr>
        <td colspan="2" align="center">
          脚本方法实现刷新
        </td>
      </tr>
      <tr>
        <td>
          选择省份:
        </td>
        <td>
          <select id="ddlPro" style="width: 201px">
            <option value="湖北">湖北</option>
            <option value="河北">河北</option>
            <option value="广东">广东</option>
            <option value="河南">河南</option>
          </select>
          <input id="btnQuery" type="button" value=" 查询" onclick="City()" />
        </td>
      </tr>
      <tr>
        <td>
          城市:
        </td>
        <td>
          <asp:DropDownList ID="ddlCity" runat="server" Width="201px">
          </asp:DropDownList>
        </td>
      </tr>
    </table>
  </div>
  </form>
</body>
</html>

后台代码：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text;

public partial class jacascript_Default : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    StringBuilder myscript = new StringBuilder();
    myscript.Append("function City() {\n");
    myscript.Append("var ddlpro=document.getElementById('ddlPro');\n");
    myscript.Append("var pro=ddlpro.options[ddlpro.selectedIndex].innerText;\n");
    //myscript.Append("var pro=document.getElementById('txtPro').value;\n");
    myscript.Append("switch(pro) { \n");
    myscript.Append("case '湖北':\n");
    myscript.Append("FillData('" + GetCityStr("湖北") + "');\n");
    myscript.Append("break;\n");
    myscript.Append("case '河北':\n");
    myscript.Append("FillData('" + GetCityStr("河北") + "');\n");
    myscript.Append("break;\n");
    myscript.Append("case '广东':\n");
    myscript.Append("FillData('" + GetCityStr("广东") + "');\n");
    myscript.Append("break;\n");
    myscript.Append("case '河南':\n");
    myscript.Append("FillData('" + GetCityStr("河南") + "');\n");
    myscript.Append("break;}\n");
    myscript.Append("}\n");

    Page.ClientScript.RegisterClientScriptBlock(typeof(string), "city", myscript.ToString(), true);

  }

  private string GetCityStr(string pro)
  {
    string city = "";
    switch (pro)
    {
      case "湖北":
        city = "武汉,黄冈,黄石,襄樊";
        break;
      case "河北":
        city = "石家庄,唐山,承德,邯郸";
        break;
      case "广东":
        city = "广州,佛山,深圳,珠海";
        break;
      case "河南":
        city = "郑州,新乡,安阳,信阳";
        break;
    }
    return city;
  }
}

CallBack无刷新联动

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="callback_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>无标题页</title>

  <script type="text/javascript">
 function FillData()
 {
 var ddlpro=document.getElementById('ddlPro');
 var pro=ddlpro.options[ddlpro.selectedIndex].value;
 <% =ClientScript.GetCallbackEventReference(this,"pro","FillDll",null) %>
  }

 function FillDll(strcity)
 {
    document.getElementById("ddlCity").options.length=0;
 var indexofcity;
 var city;
 while(strcity.length>0)
 {
      indexofcity=strcity.indexOf(",");
 if(indexofcity>0)
 {
        city=strcity.substring(0,indexofcity);

        strcity=strcity.substring(indexofcity+1);
        document.getElementById("ddlCity").add(new Option(city,city));
      }
 else
 {
        document.getElementById("ddlCity").add(new Option(strcity,strcity));
 break;
      }

    }
  }
  </script>

</head>
<body>
  <form id="form2" runat="server">
  <div>
    <table width="700px" border="1" cellpadding="5" cellspacing="0">
      <tr>
        <td colspan="2" align="center">
          callback方法实现刷新
        </td>
      </tr>
      <tr>
        <td>
          选择省份:
        </td>
        <td>
          <select id="ddlPro" style="width: 200px">
            <option value="湖北">湖北</option>
            <option value="河北">河北</option>
            <option value="广东">广东</option>
            <option value="河南">河南</option>
          </select>
          <input id="btnQuery" type="button" value=" 查询" onclick="FillData()" />
        </td>
      </tr>
      <tr>
        <td>
          城市:
        </td>
        <td>
          <asp:DropDownList ID="ddlCity" runat="server" Width="201px">
          </asp:DropDownList>
        </td>
      </tr>
    </table>
  </div>
  </form>
</body>
</html>

后台代码：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class callback_Default : System.Web.UI.Page,ICallbackEventHandler
{
 private string _data;
 protected void Page_Load(object sender, EventArgs e)
 {

  }

 ICallbackEventHandler 成员
}

Ajax无刷新联动

该例子也要用到两个页面：oec203index.aspx和datapage.aspx. datapage.aspx主要用来回送要显示的数据
.aspx页面前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="ajax_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>无标题页</title>

  <script type="text/javascript">
    var xmlhttp;
    function getData() {
      var ddlpro = document.getElementById("ddlPro");
      var pro = ddlpro.options[ddlpro.selectedIndex].innerText;
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      xmlhttp.onreadystatechange = statechange;
      xmlhttp.Open("GET", "datapage.aspx?pro=" + pro, true);
      xmlhttp.Send();
    }

    function statechange() {
      if (xmlhttp.readystate == 4) {
        if (xmlhttp.status == 200) {
          FillData(xmlhttp.responseText);
        }
      }
    }
    function FillData(strcity) {
      document.getElementById("ddlCity").options.length = 0;
      var indexofcity;
      var city;
      while (strcity.length > 0) {
        indexofcity = strcity.indexOf(",");
        if (indexofcity > 0) {
          city = strcity.substring(0, indexofcity);
          strcity = strcity.substring(indexofcity + 1);
          document.getElementById("ddlCity").add(new Option(city, city));
        }
        else {
          document.getElementById("ddlCity").add(new Option(strcity, strcity));
          break;
        }
      }
    }
  </script>

</head>
<body>
  <form id="form2" runat="server">
  <div>
    <table width="700px" border="1" cellpadding="5" cellspacing="0">
      <tr>
        <td colspan="2" align="center">
          ajax方法实现刷新
        </td>
      </tr>
      <tr>
        <td>
          选择省份:
        </td>
        <td>
          <select id="ddlPro" style="width: 201px">
            <option value="湖北">湖北</option>
            <option value="河北">河北</option>
            <option value="广东">广东</option>
            <option value="河南">河南</option>
          </select>
          <input id="btnQuery" type="button" value=" 查询" onclick="getData()" />
        </td>
      </tr>
      <tr>
        <td>
          城市:
        </td>
        <td>
          <asp:DropDownList ID="ddlCity" runat="server" Width="201px">
          </asp:DropDownList>
        </td>
      </tr>
    </table>
  </div>
  </form>
</body>
</html>

datapage.aspx后台代码：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ajax_datapage : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    string pro = Request.QueryString["pro"];
    Response.Clear();
    switch (pro)
    {
      case "湖北":
        Response.Write("武汉,黄冈,黄石,襄樊");
        break;
      case "河北":
        Response.Write("石家庄,唐山,承德,邯郸");
        break;
      case "广东":
        Response.Write("广州,佛山,深圳,珠海");
        break;
      case "河南":
        Response.Write("郑州,新乡,安阳,信阳");
        break;
    }
  }
}

以上所述就是本文的全部内容了，希望大家能够喜欢。

实现无刷新联动例子汇总

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript的单例模式 （singleton in Javascript)
Jun 11 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
jQuery 选择器详解
Jan 19 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 Javascript
javascript中CheckBox全选终极方案
May 20 #Javascript
javascript消除window.close()的提示窗口
May 20 #Javascript
在JS方法中返回多个值的方法汇总
May 20 #Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 #Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 #Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 #Javascript
JS中的Replace方法使用经验分享
May 20 #Javascript
开幕词(63) 工作总结(1972) 慰问信(53) 汇报材料(247) 口号(179) 报告(147) 闭幕词(9) 导游词(322) 计划(88) 党团范文(807)
You might like
Yii中render和renderPartial的区别
2014/09/03 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
javascript 建设银行登陆键盘
2008/06/10 Javascript
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
用Python生成器实现微线程编程的教程
2015/04/13 Python
python基础教程之Filter使用方法
2017/01/17 Python
python实现杨辉三角思路
2017/07/14 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
PyTorch中的C++扩展实现
2020/04/02 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
马云的职业生涯规划之路
2014/01/01 职场文书
优秀食品类广告词
2014/03/19 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
年度考核个人总结
2015/03/06 职场文书
实习推荐信格式模板
2015/03/27 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS