Home > Developer > Web Develop
nation.php
1<! DOCTYPE html Public"-//w3c//dtd XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >234<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>5<script src= ". /jquery-1.11.2.min.js "></script>6<script src= ". /tanchuang.js "></script><!--pop-up window js file--7<title> Untitled Document </title>8<link href= ". /tanchuang.css "rel=" stylesheet "type=" Text/css "/><!--pop-up window style sheet--9Ten One<body> A<input type= "button" value= "Show" id= "Btn"/> - -<table width= "100%" border= "1" cellpadding= "0" cellspacing= "0" > the<TR id= "SJ" > -<td> Code </td> -<td> name </td> -<td> Operations </td> +</tr> -<tbody id= "TB" ></tbody><!--table Contents-- + A</table> at</body> - -<script type= "Text/javascript" > - - //Ajax executes asynchronously when executed, and asynchronously means that the message is sent regardless of whether the receiving party receives it. Synchronization refers to sending a scare message after the message is sent to confirm that the receiving party receives the message. Ajax defaults to asynchronous execution, and asynchronous execution is relatively efficient. - asynchronous in//zai Ajax is the process of executing code while invoking the processing page. in$ ("#btn"). Click (function(){ - to$.Ajax ({ + //async:false,//the way Ajax is loaded into sync. -URL: "nationchuli.php", theDataType: "TEXT", *Successfunction(data) { $ varHang = data.Split("|");Panax Notoginseng varstr = ""; - the for(vari=0;i) + { A varLie = Hang[i].Split("^"); the +str = str+ "<tr><td>" +lie[0]+ "</td><td>" +lie[1]+ "</td><td><span class= ' SC ' Bs= ' "+lie[0]+" ' > Delete </span><span class= ' xq ' bs= ' "+lie[0]+" ' > View details </span></td></tr> "; - $ } $$ ("#tb").html (str); - //Add Event -$ (". SC"). Click (function(){ the -Alert ("AA");Wuyi the }) - //View Details Wu$ (". Xq"). Click (function(){ - About varCode = $ (This). attr ("BS"); $$.Ajax ({ - -URL: "xqchuli.php", -Data:{code:code}, AType: "POST", +DataType: "TEXT", theSuccessfunction(data) { - varLie1 = data.Split("^"); $ varstr = "<div> code:" +lie1[0]+ "</div><div> Name:" +lie1[1]+ "</div>"; the varBTN = "<input type= ' button ' value= ' OK ' class= ' qd '/> '; the the varTC =NewWindow ({ theTitle: "More Information", -CONTENT:STR, inButtonsbtn the the }); About the$ (". QD"). Click (function(){ the$ (". Zhuti").remove (); the$ ("#zz").remove (); + }) - } the Bayi }) the the }) - - } the }); the the //to delete the Add event, if it is loaded in this and is asynchronously loaded, there is no click event on the page. Because asynchronous execution performs both Ajax and click events, Ajax is used more time than click events, so when clicked, Ajax is not loaded and the page is not loaded on the delete. the //solutions available in 2 different ways - //1 is the Ajax loading method into a synchronous async:false, the place to write see the above code. the //2. Get the code for the next click event into Ajax. the /*$ (". SC"). Click (function () { the 94 alert ("AA"); the the })*/ the 98 }) About -</script>101 102nationchuli.php
1 <? PHP 2 include (".. /dbda.class.php "); 3 $db New Dbda (); 4 $sql = "SELECT * from Nation"; 5 Echo $db->strquery ($sql);
xqchuli.php
1 <? PHP 2 include (".. /dbda.class.php "); 3 $db New Dbda (); 4 $code $_post ["Code"]; 5 $sql = "SELECT * from Nation where code= ' {$code} '"; 6 Echo $db->strquery ($sql);
2. Use BOOTSTRP to make pop-up windows
<! DOCTYPE html Public"-//w3c//dtd XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >class= "Modal Fade" id= "Mymodal" tabindex= "-1" role= "dialog" aria-labelledby= "Mymodallabel" aria-hidden= "true" > <divclass= "Modal-dialog" > <divclass= "Modal-content" > <divclass= "Modal-header" > <button type= "button"class= "Close" data-dismiss= "modal" aria-hidden= "true" >×</button> class= "Modal-title" id= "Mymodallabel" > More information class= "Modal-body" id= "nr" > Add some text here </div> <divclass= "Modal-footer" > <button type= "button"class= "Btn Btn-default" data-dismiss= "modal" > OK </button> </div> </div><! --/.modal-content--</div><!--/.modal--></div></body><script type= "text/ JavaScript ">$("#btn"). Click (function(){ $.Ajax ({URL: "Nationchuli.php",DataType: "TEXT",Success:function(data) {varHang = data.Split("|"); varstr = ""; for(vari=0;i) { varLie = Hang[i].Split("^"); STR= str+ "<tr><td>" +lie[0]+ "</td><td>" +lie[1]+ "</td><td><span class= ' SC ' bs= ' "+lie[0]+" ' > Delete </span><button class= ' btn btn-primary btn-lg xq ' data-toggle= ' modal ' data-target= ' #myModal ' bs= ' "+lie[0]+" > Start demo modal box </button></td></tr> "; } $("#tb").html (str); //Add Event$ (". SC"). Click (function() {alert ("AA"); }) //View Details$ (". Xq"). Click (function(){ varCode = $ (This). attr ("BS"); $.Ajax ({URL: "Xqchuli.php",Data: {Code:code},type: "POST",DataType: "TEXT",Success:function(data) {varLie1 = data.Split("^"); varstr = "<div> Nationality Code:" +lie1[0]+ "</div><div> National Name:" +lie1[1]+ "</div>"; $("#nr").html (str); } }) }) } }); })</script>Ajax to display information after the use of Ajax, BOOTSTRP do pop-up window display information details
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
