简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

Summary of examples of achieving non-refresh linkage_javascript skills

WBOY
Release： 2016-05-16 15:58:14
Original
1114 people have browsed it

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>
Copy after login

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>
Copy after login

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;

    }
  }
}
Copy after login

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>
Copy after login

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;
  }
}
Copy after login


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>
Copy after login

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 成员
}
Copy after login

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>
Copy after login

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;
    }
  }
}
Copy after login

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

Related labels：
无刷新联动
source：php.cn
Previous article：jQuery plug-in expander implements image flipping effects_jquery Next article：JavaScript implements image carousel effects with titles_javascript skills
Statement of this Website
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
Latest Articles by Author
Latest Issues
Visual Studio Code Intellisense and autocomplete - Vite, JSconfig and aliases - can't figure out the right combination Just started working with Visual Studio Code again after years of using PHPStorm/Webstorm ...
From 2023-11-04 16:37:58
0
1
250
Using useFetch to retain cached data in Nuxt3 I have the following problem while using nuxt3. The dynamic page [slug].vue loads the data...
From 2023-11-03 21:01:41
0
2
244
Laravel Inertia JS Flash message only displays once Because InertiaJS does not refresh the same route component, things like flash messages wi...
From 2023-11-03 12:33:50
0
1
342
PlanetScaleDb Prisma Configuration - Server does not allow insecure connections, clients must use SSL/TLS I'm starting a brand new PlanetScale support project and setting it up using Prisma. I fol...
From 2023-11-02 08:58:00
0
1
252
Ways to resolve "Error: error:0308010C:digital envelope routines::unsupported" error in Nodejs 18 I need help with my NuxtJS application. Recently, I got an ESLint conflict in the applicat...
From 2023-10-18 15:53:45
0
2
220
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！