Home > Developer > JavaScript
Method 1: Use <% = %> to call
Front-end JS:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var methodStr = "<% = BehindMethod () %> ";
Alert (methodStr );
</Script>
Method:
Copy codeThe Code is as follows:
Public static string BehindMethod ()
{
Return "this is a background method ";
}
Method 2: Use ajax to call
Front-end js:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "js/jquery-1.4.3.min.js"> </script>
<Script type = "text/javascript">
Var params = '{ext: "p9hp"}'; // parameter. Note that the parameter name must be consistent with that of the background method.
$ (Function (){
$ ("# BtnOk"). click (function (){
$. Ajax ({
Type: "POST", // Request Method
Url: "AjaxDemo. aspx/GetImg", // Request Path: page/method name
Data: params, // Parameter
DataType: "text ",
ContentType: "application/json; charset = UTF-8 ",
BeforeSend: function (XMLHttpRequest ){
$ ("# Tips"). text ("start to call the post-head method to obtain the image path. Please wait ");
$ ("# ImgFood"). attr ("src", "image/loading.gif ");
},
Success: function (msg) {// success
$ ("# ImgFood"). attr ("src", eval ("(" + msg + ")"). d );
$ ("# Tips"). text ("Call method ends ");
},
Error: function (obj, msg, e) {// exception
Alert ("OH, NO ");
}
});
});
});
</Script>
Page html:
Copy codeThe Code is as follows:
<Body>
<Form id = "form1" runat = "server">
<Div>
<Label id = "tips"> </label>
<Input value = "Click me to show you an image" type = "button" width = "35px" id = "btnOk"/>
</Div>
</Form>
</Body>
Background method:
Copy codeThe Code is as follows:
[System. Web. Services. WebMethod]
Public static string GetImg (string ext)
{
System. Threading. Thread. Sleep (5000); // delay of 5 seconds for a bit of waiting Effect
StringComparer SC = StringComparer. OrdinalIgnoreCase;
String [] extArr = new string [] {"php", "asp", "aspx", "txt", "bmp "};
Bool f = extArr. Any (s => SC. Equals (s, ext); // you can check whether the specified suffix exists.
If (f)
{
Return "image/54222860.jpg ";
}
Return "image/star1.jpg ";
}
Method 3: AjaxPro (also ajax)
Step 1: Download AjaxPro. dll (or AjaxPro.2.dll) and add the reference to the project.
Step 2: modify the configuration file web. config
Copy codeThe Code is as follows:
<System. web>
<HttpHandlers>
<! -- Register ajaxPro.2 -->
<Add verb = "*" path = "*. ashx" type = "AjaxPro. AjaxHandlerFactory, AjaxPro.2"/>
</HttpHandlers>
</System. web>
Step 3: Register AjaxPro during the Page_Load event on the page. For example:
Copy codeThe Code is as follows:
Protected void Page_Load (object sender, EventArgs e)
{
AjaxPro. Utility. RegisterTypeForAjax (typeof (AjaxDemo); // register
}
Step 4: Create a server method and mark it with [AjaxPro. AjaxMethod]
Copy codeThe Code is as follows:
[AjaxPro. AjaxMethod]
Public string GetImgByAjaxPro ()
{
Return "image/54222860.jpg ";
}
Step 5: Call JS at the front end:
Copy codeThe Code is as follows:
Function GetMethodByAjaxPro (){
Var a = JustTest. AjaxDemo. GetImgByAjaxPro (); // JustTest is the current namespace, and AjaxDemo indicates the background class
Document. getElementById ("imgAjaxPro"). src = a. value;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
