Jquery Ajax Project Development Summary

I. Function Overview: it is actually a very simple two-level drop-down list linkage.

 

Ii. Development details:

 

1. Use jquery Ajax on the information_create.aspx page to implement two levels of association in the drop-down list. This page is implemented as follows:

 

Step 1: Introduce the jquery package. Code: <SCRIPT src = "../JS/jquery. js" type = "text/JavaScript"> </SCRIPT>

 

Step 2: add three controls (two dropdownlist for association and one hiddenfield for saving the selected value). Code:

<TD>
Channel/topic:
</TD>
<TD>
<Asp: dropdownlist id = "ddlchannel" runat = "server"> </ASP: dropdownlist>

& Nbsp;

<Asp: dropdownlist id = "ddlsection" runat = "server" onchange = "GetType ()">
<Asp: listitem value = ""> select </ASP: listitem>
</ASP: dropdownlist>

<Asp: hiddenfield id = "hidtype" runat = "server"/>

</TD>

 

Step 3: Compile jquery JS Code:

<SCRIPT type = "text/JavaScript">
$ (Document). Ready (function (){
$ ('# Ddlchannel'). Change (function () // register the ddlchannel change event
{
$. Get (// call get in jquery Ajax
'../Plug/ajaxrequest. aspx', // The first parameter indicates the page to be requested
{
Type: $ ("# ddlchannel"). Val (), // The second parameter indicates the parameter to be sent to the request page. You can use request ["type"] and request ["state"] On the request page.
State: 1
},
Function (data) // The third indicates a function to obtain data.
{
$ ("# Ddlsection"). Empty (); // clear the ddlsection
$ (Data). appendto ("# ddlsection") // use the appendto data to append to the ddlsection control.
}
);
});
});
 
// This is a hidden control. When the second dropdownlist is in onchange, the value is saved to the hidden control.
Function GetType ()
{
$ ("# Hidtype"). Val ($ ("# ddlsection"). Val ());
}
</SCRIPT>

 

2. The ajaxrequest. ASPX page is an Ajax request page. In order to use this request page in the future, the service is matched by passing different state parameters. Code:

// Obtain the type. In this way, different states can be passed when the service cannot be used on multiple pages in the future, which are matched by the switch.
State = int. parse (request ["state"]. tostring ());

Switch (state)
{
Case 1:
// Set Data
Break;
Case 2:
// Set Data
.
.
.
}

Note: This is only one of my jquery Ajax projects. For more information, see the jquery API address in my downloads:

Http://download.csdn.net/source/2423908