博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
4种无刷新页面的技术
阅读量:6003 次
发布时间:2019-06-20

本文共 2998 字,大约阅读时间需要 9 分钟。

转自:https://wangguorui89.iteye.com/blog/491757

1.IFrame 实现无刷新

  <script language="javascript">
    function Search()
    {
      var city=document.getElementById("TextBox1").value;
      if(city !="")
      {
        document.getElementById("iframe1").src="myframe.aspx?city=" +city;
      }
    }
  </script>
<iframe src="myframe.aspx" style="TEXT-ALIGN: center" id="iframe1" width="100%" height="100%" frameborder="0" scrolling="no"/>
  protected void Page_Load(object sender, EventArgs e)
  {
    //获取传递过来的参数
    string city = Request.QueryString["city"];
    //判断城市名
    switch (city)
    {
      case "北京":
        //填充相关的区域
        DropDownList1.Items.Clear();
        DropDownList1.Items.Add("朝阳");
        DropDownList1.Items.Add("海淀");
        DropDownList1.Items.Add("东城");
        DropDownList1.Items.Add("西城");
        break;
2. js方法实现无刷新 Page.ClientScript.RegisterClientScriptBlock
    //创建字符串连接对象
    StringBuilder myscript = new StringBuilder();
    //使用字符串组织一个JavaScript脚本方法
    myscript.Append("function seekCity()  {\n");
    myscript.Append("var city=document.getElementById('TextBox1').value; \n");
    myscript.Append("switch(city)    {\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), "seekCity", myscript.ToString(),true);
3. 使用CallBack技术
  <script type="text/javascript">
 function FillData()
    {
      var city=document.getElementById("TextBox1").value;
      <% =this.ClientScript.GetCallbackEventReference(this,"city","FillDll",null) %>;
 //向后台传送数据 数据是:city  数据返回后,前台处理数据的方法是:FillDll
    }
    function FillDll(strcity)
    {
  </script>
public partial class _Default : System.Web.UI.Page,ICallbackEventHandler //类继承接口 并实现接口方法
{
 public string GetCallbackResult()
   {
     //返回处理后的数据
     return _data;
}
   public void RaiseCallbackEvent(string eventArgument)
    {
     //判断传递过来的参数
      switch (eventArgument)
      {
       case "北京":
          _data = "朝阳,海淀,东城,西城";
          break;
      case "上海":
          _data = "浦东,静安,徐汇,虹口";
          break;
       case "济南":
          _data = "历城,历下,市中,天桥";
          break;
     }
    }
}
4. 使用ajax技术实现无刷新
 <script type="text/javascript">
  var xmlhttp;
  function getData()
  {
   //获取用户填写的名称
   var city=document.getElementById("txt").value;
   //创建异步调用对象
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   //将对象状态与事件相关联
   xmlhttp.onreadystatechange=statechange;
   //加载要链接的页面
   xmlhttp.Open("POST","datapage.aspx?city=" +city,true);
   //发送请求
   xmlhttp.Send();

转载于:https://www.cnblogs.com/sharpest/p/5625333.html

你可能感兴趣的文章
新零售催生未来经济形态 线上线下全渠道融合达新高度
查看>>
测试VDI网络性能 保证终端用户体验
查看>>
嵌入式软件测试与一般软件测试之异同研究
查看>>
Cookie问题(烦了三天)
查看>>
华云数据重新定义企业级云平台服务
查看>>
大数据推动人工智能发展 AI+X将实现人工智能生活化
查看>>
IDC:IBM Bluemix 落地 中国PaaS市场竞争进入新阶段
查看>>
在线协作工具“一起写”获金山WPS战略投资
查看>>
专家解读工业物联网优势的商业模式
查看>>
清新区建成清远市首个农综改大数据平台
查看>>
sqlite3数据库归纳
查看>>
物联网普而不及 仍缺杀手级应用
查看>>
持续集成引擎 Hudson 和 Jenkins 的恩恩怨怨
查看>>
《微课实战:Camtasia Studio入门精要》——1.3 软件安装
查看>>
《vSphere性能设计:性能密集场景下CPU、内存、存储及网络的最佳设计实践》一1.1.3 评估物理性能...
查看>>
良品铺子天猫618爆卖300万个手撕面包,还用数据改造线下
查看>>
这位阿里工程师的家,为何设置了重重机关?
查看>>
Linux平台Swift语言开发学习环境搭建
查看>>
Facebook 开源一些关于深度学习的工具
查看>>
《MATLAB神经网络超级学习手册》——1.3 MATLAB R2013a的安装
查看>>