Jquery + Ajax + ashx implements a simple Ajax Effect

Source: Internet
Author: User

Although I used Ajax in the past, I always felt that it was wrong. In the past, Ajax was used to request the ASPX page. There were countless pages and I felt quite confused.

In my recent work, I also felt that my colleague's jquery + ashx was quite simple and convenient to use. I made a small demo here.

 

<% @ Page Language = "C #" autoeventwireup = "true" codefile = "ajaxget. aspx. cs" inherits = "ajaxget" %>

 

<! 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 runat = "server">

<Title> No title page </title>

<SCRIPT type = "text/JavaScript" src = "Misc/JS/jquery-1.2.6.js"> </SCRIPT>

</Head>

<Body>

<SCRIPT type = "text/JavaScript" Language = "JavaScript">

Function getcategorydata (type)

{

Alert ("Test start ");

 

$. Ajax ({

Type: 'get ',

URL: 'ajaxservice/handler. ashx ',

Datatype: 'text ',

Data: 'Type = '+ type,

Success: function (MSG)

{

Alert (MSG );

$ ("# Category" pai.html (MSG );

},

Error: function (data ){

Alert (data );

}

})

}

</SCRIPT>

<Form ID = "form1" runat = "server">

<Div>

<Input type = "radio" value = "1" name = "wangtao" onclick = 'getcategorydata (this. Value) '/>

<Input type = "radio" value = "2" name = "wangtao" onclick = 'getcategorydata (this. Value) '/>

 

<Select id = "category">

</SELECT>

</Div>

</Form>

</Body>

</Html>

 

The front-end page is very simple, that is, two radio and one select. Put the value of the selected radio in the SELECT statement.

 

Background ashx code

 

<% @ Webhandler Language = "C #" class = "handler" %>

 

Using system;

Using system. Web;

Using system. text;

 

Public class handler: ihttphandler {

 

Public void processrequest (httpcontext context ){

 

Stringbuilder strbul = new stringbuilder ();

 

Strbul. append ("<option value = 'wangta'> ");

Strbul. append (context. Request. Params ["type"]. tostring ());

Strbul. append ("</option> ");

 

 

Context. response. contenttype = "text/html ";

Context. response. Write (strbul. tostring ());

 

 

}

 

Public bool isreusable {

Get {

Return false;

}

}

 

}

 

Although it is very simple, it can be used to give everyone an alternative.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.