Ajax Connection Database load + three-level linkage

Ajax Connection Database loading

Ajax is a web development technique that creates interactive Web applications.

AJAX = asynchronous JS and XML (a subset of standard generic markup languages).

AJAX is a technique for creating fast, Dynamic Web pages. AJAX enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server. This means that you can update a part of a webpage without reloading the entire page. traditional Web pages (without AJAX) if you need to update the content, you must reload the entire page page. Advantage: You can exchange data with the server and update some of the Web content without reloading the entire page. No browser plugins are required, but users are required to allow JavaScript to be executed on the browser. 1. Creating AjaxClick the button to load the data. . Create a new LINQ to SQL class to pull the user table and the nation table into the classCreate a Web form or a plain HTML interface + a generic handler loaduserajax.ashx

(1) Body inside code

1  <table id= "tb1" style= "text-align:center; width:100%;" > 2     <thead> 3         <tr style= "color: #ff6a00;" > 4             <td> user name </td> 5             <td> password </td> 6             <td> nickname </td> 7             <td> Sex </td> 8             <td> Birthdays </td> 9             <td> age </td>10             <td> national </td>11         </tr>12     </thead>13     <tbody>14     </tbody>15     </table>16     < Input type= "button" value= "Load" id= "Btn1"/>

(2) JS code section

 1 <script> 2//Click the Load button 3 $ ("#btn1"). Click (function () {4//write an AJAX statement to commit the data to a service side 5 $.ajax ({             6 URL: "Ajax/loaduserajax.ashx",//the server to which the data will be submitted to 7 data: {},//to submit what data to the server, {} The basic format is "key": "Data to be transmitted" 8             Type: "POST",//How to submit data in the past 9 DataType: "JSON",//Returns a data type 10//Request Complete 11                     Success:function (data) {14 $ ("#tb1 tbody"). empty ();//Empty TBODY13 for var str = "<tr style=\" \ ">"; str + = "<td>" + data[i].username + "</td > "; + str + =" <td> "+ Data[i].password +" </td> "; + str + =" <td&                     gt; "+ Data[i].nickname +" </td> "; str + =" <td> "+ data[i].sex +" </td> "; 19 str + = "<td>" + data[i].birthday + "</td>"; str + = "<td>" + data[i].  Age + "</td>"; 21                   str + = "<td>" + data[i].nation + "</td>"; str + = "</tr>"; 23             $ ("#tb1 tbody"). Append (str),}25},//SUCCESS26//request failed 27 Error:function () {alert (' Server connection failed!!! (}30});//ajax31});//btn1.click32 </script>

(3) Userajax.ashx inside code

 1 <%@ webhandler language= "C #" class= "Userajax"%> 2 3 using System; 4 using System.Web; 5 using System.Collections; 6 using System.Collections.Generic; 7 using System.Linq; 8 using System.Text; 9 public class Userajax:ihttphandler11 {ProcessRequest (HttpContext context) 14 {15/ /When data is received, use context. request["Key"]; Extract the data from Ajax int count = 0;//before there is data in front of string end = "[";//Create JSON object, set default value, basic format {"Key": "V             Alue "," ":" "," ":" "}, with multiple [] enclosed, between each, separated by using (webdatacontext con = new Webdatacontext ()) 19 {20 list<user> ulist = con.                     User.tolist (); foreach (User u in ulist) {22//front with data (count>0) {24 End + = ",";}26 end + = "{\" username\ ": \" "+u.username+" \ ", \" Password\ " : \ "" +u.password+ "\", \ "nicknane\": \ "" +u.nickname+ "\", \ "sex\": \ "" +u.sexstr+ "\", \ "birthday\": \ "" +u.birstr+ "\", \ " Age\ ": \" "+u.age+" \ ", \" NatioN\ ": \" "+u.nationname+" \ "}", count++;28}29}30 end + = "]"; ntext. Response.Write (end); Response.End ();}35-public bool IsReusable37 {get39 {FAL se;41}42}43 44}

2. JSON and XML

The role of XML and JSON: data transfer between different languages

The earliest data type used is XML
Disadvantage:
1. Large Code size
2, the structure is not clear
3. Trouble with resolution

The data type used now is JSON
Advantage:
1. Clear structure
2, similar to object-oriented parsing method

JSON basic format:
{"Key": "Value", "": "", "": "}

{"username": "", "Password": "", "nickname": "", "Sex": "", "Birthday": "", "Nation": ""}

-------------------------------------------------------Three-level linkage does not refresh the interface1. Creation of threeDropDownList

2.js

Bind1 ($ ("#DropDownList1"),'0001','1'); function bind1 (drop, PC, key) {$.ajax ({URL:"ajax/china.ashx", data: {"Pcode": PC}, type:"Post", DataType:"JSON", Success:function (data) {drop.empty ();  for(Iinchdata) {                    varstr ="<option value=\ ""+ Data[i].code +"\ ">"+ Data[i].name +"</option>";                Drop.append (str); }                if(Key = ="1") {bind1 ($ ("#DropDownList2"), $("#DropDownList1"). Val (),'2'); }                if(Key = ="2") {bind1 ($ ("#DropDownList3"), $("#DropDownList2"). Val (),'3'); }}, Error:function () {alert ('Server Connection Failed! ');    }        }); }    $("#DropDownList1"). Change (function () {BIND1 ($ ("#DropDownList2"), $( This). Val (),'2');    }); $("#DropDownList2"). Change (function () {BIND1 ($ ("#DropDownList3"), $( This). Val (),'3'); });

3. General handling procedures

usingSystem;usingsystem.web;usingSystem.Collections;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text; Public classChina:ihttphandler { Public voidProcessRequest (HttpContext context) {stringPcode = context. request["Pcode"]; StringBuilder End=NewStringBuilder (); intCount =0; End. Append ("["); using(Mydbdatacontext con =NewMydbdatacontext ()) {List<ChinaStates> clist = con. Chinastates.where (r = R.parentareacode = =pcode).            ToList (); foreach(Chinastates Cinchclist) {                if(Count >0) end. Append (","); End. Append ("{\ "code\": \ ""+c.areacode+"\ ", \" name\ ": \""+c.areaname+"\"}"); Count++; }} end. Append ("]"); Context.        Response.Write (end); Context.    Response.End (); }      Public BOOLisreusable {Get {            return false; }    }}

Ajax Connection Database load + three-level linkage