A simple way to invoke ASP. NET backend directly using jquery

Using jquery's $.ajax () makes it easy to invoke the ASP.

[WebMethod] Namespace

1, no parameter method call, Note: 1. Method must be static method, and must have [WebMethod] declaration

Backstage <c#>:

Using System.Web.Script.Services;  [Webmethod]public static string SayHello () {   return "Hello ajax!";}

Front desk <jquery>:

$ (function () {   $ ("#btnOK"). Click (function () {     $.ajax ({      //) to post by      type: "POST",      //method on which page and method name      URL: "Data.aspx/sayhello",      contentType: "Application/json; Charset=utf-8 ",      dataType:" JSON ",      success:function (data) {         /////returned by DATA.D get content        alert (DATA.D);      } ,      error:function (err) {         alert (err);      }    });      Disable the button's commit    return false;});  

2. Method calls with parameters

Backstage <c#>:

Using System.Web.Script.Services;  [Webmethod]public static string Getstr (String str,string str2) {  return str + str2;}

Front desk <jquery>:

$ (function () {   $ ("#btnOK"). Click (function () {     $.ajax ({      type: "Post",      URL: "Data.aspx/getstr",      Methods the method of writing the parameters must be, str is the name of the formal parameter, str2 for the second parameter name      data: "{' str ': ' I am ', ' str2 ': ' XXX '}",      contentType: "Application/json; Charset=utf-8 ",      dataType:" JSON ",      success:function (data) {         /////returned by DATA.D get content         alert (DATA.D);      } ,      error:function (err) {         alert (err);      }    });      Disable the button's commit    return false;});  

3. Call to return array method

Backstage <c#>:

Using System.Web.Script.Services;  [Webmethod]public Static list<string> GetArray () {  list<string> li = new list<string> ();    for (int i = 0; i <; i++)    Li. ADD (i + "");    return Li;}

Front desk <jquery>:

$ (function () {$ ("#btnOK"). Click (function () {$.ajax ({type: "Post", url: "Data.aspx/getarray", content Type: "Application/json;          Charset=utf-8 ", DataType:" JSON ", success:function (data) {//before inserting, empty the UL $ (" #list "). HTML (" "); Recursively gets the data $ (DATA.D). each (function () {//insert result into Li inside $ ("#list"). Append ("<li>" +this + "</        Li> ");          });      alert (DATA.D);      }, Error:function (err) {alert (ERR);      }    });  Disables the button's commit return false; });});/ <reference path= "jquery-1.4.2-vsdoc.js"/>$ (function () {$ ("#btnOK"). Click (function () {$.ajax ({type: "Po St ", URL:" Data.aspx/getarray ", ContentType:" Application/json;          Charset=utf-8 ", DataType:" JSON ", success:function (data) {//before inserting, empty the UL $ (" #list "). HTML (" "); Recursively gets the data $ (DATA.D). each (function () {//insert result into Li inside $ ("#list"). Append ("<li>" +this + "</li        > ");  });        alert (DATA.D);      }, Error:function (err) {alert (ERR);      }    });  Disables the button's commit return false; });});

4. Call to return Hashtable method

Backstage <c#>:

Using system.web.script.services;using System.Collections;  [Webmethod]public Static Hashtable Gethash (string key,string value) {  Hashtable hs = new Hashtable ();    Hs. ADD ("www", "yahooooooo");  Hs. ADD (key, value);      return HS;}

Front desk <jquery>:

$ (function () {   $ ("#btnOK"). Click (function () {     $.ajax ({      type: "Post",      URL: "Data.aspx/gethash",      //Remember to add double quotes t_t       data: "{' key ': ' Haha ', ' value ': ' Haha! '} ',      contentType: "Application/json; Charset=utf-8 ",      dataType:" JSON ",      success:function (data) {         alert (" Key:haha ==> "+data.d[" haha "]+" \ n Key:www ==> "+data.d[" www "]);      },      error:function (err) {         alert (err +" err ");      }    });      Disable the button's commit    return false;});  

5. Manipulating XML

XMLtest.xml:view plaincopy to Clipboardprint?<?xml version= "1.0" encoding= "Utf-8"?><data><item>  <id>1</id>  <name>qwe</name></item><item>  <id>2</id >  <name>asd</name></item></data><?xml version= "1.0" encoding= "Utf-8"?>< data><item>  <id>1</id>  <name>qwe</name></item><item>  <id>2</id>  <name>asd</name></item></data>

Front desk <jquery>:

$ (function () {   $ ("#btnOK"). Click (function () {     $.ajax ({      URL: "Xmltest.xml",      dataType: ' xml ',// The returned type is XML, and the preceding JSON is not the same as the       success:function (XML) {         //Empty list        $ ("#list"). HTML ("");        Finds the XML element        $ (XML). Find ("Data>item"). each (function () {           $ ("#list"). Append ("<li>id:" + $ (this). Find ( "id"). Text () + "</li>");          $ ("#list"). Append ("<li>name:" + $ (this). Find ("Name"). Text () + "</li>")      }),      error: function (result, status) {//If there is an error above, the callback function will be executed here,        alert (status);      }    );      Disable the button's commit    return false;});  

