search

Home  >  Article  >  Web Front-end  >  Summary of examples of achieving non-refresh linkage_javascript skills

Summary of examples of achieving non-refresh linkage_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:58:141146browse

Iframe achieves no refresh linkage

The no refresh of iframe is actually a partial refresh. The scroll bar of the status bar will still scroll, but the page will not flicker. This is an older technology, and it will be slower when the data being processed is large. In this example, two pages are needed: index.aspx and frame.asapx. Index.aspx is used to display the interface. There is an iframe tag pointing to the frame.aspx page to display the results
index.aspx front-end code

<%@ 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&#63;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>

Front-end code of 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 background code: 

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 no refresh linkage

Front page code: 

<%@ 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>

Backend code: 

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 no refresh linkage

Front-end code: 

<%@ 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>

Backend code: 

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 no refresh linkage

This example also uses two pages: oec203index.aspx and datapage.aspx. datapage.aspx is mainly used to send back the data to be displayed
.aspx page front-end code: 

<%@ 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&#63;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 background code: 

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;
    }
  }
}

The above is the entire content of this article, I hope you all like it.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery plug-in expander implements image flipping effects_jqueryNext article：jQuery plug-in expander implements image flipping effects_jquery

Related articles

See more