Ajax examples tell you AJAX applications

ajx.php Tutorial
<?php
$link =mysql _ Connect ("localhost ", "root", "root");

• mysql_select_db ("Abd", $link);
• $GB 2312string=iconv (' utf-8 ', ' Gb2312//ignore ', $requestajaxstring); In Ajax, first use encodeURIComponent to encode the Chinese to be submitted
• mysql_query ("Set names gb2312");
• $name =$_get[name];
• if ($name) {
• $sql =mysql_query ("select * from Stu where Name= '". $name. "");
• $info =mysql_fetch_array ($sql);
• Header (' content-type:text/html; charset=gb2312 '); Specifies that the encoded format for sending data is gb2312
• if (! $info) {
• Echo "No record!"
• }else{echo $info [Sheng];}
• }
• ?>

Copy Code

test.php

• <script language= "javascript" >
• var http_request = false;
• function createrequest (URL) {
• Initialize the object and issue a XMLHttpRequest request
• Http_request = false;
• if (window.xmlhttprequest) {//mozilla and other browsers
• Http_request = new XMLHttpRequest ();
• if (Http_request.overridemimetype) {
• Http_request.overridemimetype ("text/xml");
• }
• else if (window.activexobject) {//ie browser
• try {
• Http_request = new ActiveXObject ("Msxml2.xmlhttp");
• catch (e) {
• try {
• Http_request = new ActiveXObject ("Microsoft.XMLHTTP");
• catch (e) {}
• }
• }
• if (!http_request) {
• Alert ("Cannot create XMLHTTP instance!");
• return false;
• }
• Http_request.onreadystatechange = alertcontents; Specify the Response method
• Http_request.open ("Get", url, True); Issuing HTTP Requests
• Http_request.send (NULL);
• }
• function alertcontents () {//Processing server returned information
• if (http_request.readystate = = 4) {
• var objhelpid = document.getElementById ("Usernamehelp");
• var objhelp1id = document.getElementById ("Usernamehelp1");
• if (Http_request.responsetext!= "") {objhelp1id.innerhtml = http_request.responsetext;objhelpid.innerhtml = "";}
• else{objhelpid.innerhtml = http_request.responsetext;objhelp1id.innerhtml = "";}
• }
• }
• </script>
• <script language= "JavaScript" >
• function CheckName () {
• var name = Form1.name.value;
• if (name== "") {
• Window.alert ("Please fill in username!");
• Form1.name.focus ();
• return false;
• }
• else {
• Createrequest (' ajx.php?name= ' +name+ ' &nocache= ' +new date (). gettime ());
• }
• }
• </script><form name= "Form1" method= "Post" action= "post.php" >
• <table>
• <tr>
• <td> name <input type= "text" name= "name" size= "onchange=" CheckName () "/></td>"
• <td> score <input type= "text" name= "Fen" size= "/><div id=" USERNAMEHELP1 "style=" color:blue; Float:right "></div></td>
• <TD ><input type= "button" value= "Delete"/></td>
• </tr>
• <tr>
• <td></td>
• <td><input style= "Display:none" id= "Clear_all" type= "button" value= "Erase All Content"/><input type= "Submit" Name= "Submit" value= "submitted" ></td>
• </tr>
• </table>

Copy Code

Database Tutorials

• Create TABLE ' Stu ' (
• ' id ' int (one) not NULL auto_increment,
• ' name ' varchar NOT NULL,
• ' Fen ' varchar NOT NULL,
• ' sheng ' varchar NOT NULL,
• Unique key ' ID ' (' ID ')
• ) Engine=myisam default Charset=utf8 auto_increment=3;
• --
• --Export the data in the table ' Stu '
• --
• Insert INTO ' Stu ' values (1, ' zz3 ', ', ' Beijing ');
• Insert INTO ' Stu ' values (2, ' li4 ', ', ' Shandong ');

Copy Code

Run effect

When you enter a person name if there is a database, return the province to which it belongs
--------------------------------------------------------------------------------
But that's not what I want. The effect is the following figure

Which is to add Ajax andjqueryThe dynamic creation table to blend together

In order to reduceMasterMaster's valuableTimeI uploaded the code ([Url=thread-210393-1-1.html]http://bbs.Phpchina. Com/thread-210393-1-1.html[/url]) Creating a table dynamically is ok.php this.file
The Ajax of a single table is the test.php effect.
is to combine Ajax with the advantages of a dynamic table. Enter a name if there is a return address in the database if not, return no records

Difficulty: Because the table is an array name[] so the return of Ajax should also be an array <div id= "usernamehelp1[" style= "Color:blue"; Float:right "></div>

Look at an example

<script language= "JavaScript" >

Window.onload = function ()
{
Createdateselect ();
}

var xmlhttp = false;
var e;

Creating XMLHTTP Objects
function Getxmlhttpobj ()
{
var c = null;
Try
{
c = new ActiveXObject ("Msxml2.xmlhttp");
}
catch (E)
{
Try
{
c = new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (SC)
{
c = null;
}
}

if (!c && typeof XMLHttpRequest!= "undefined")
{
c = new XMLHttpRequest ();
}

return C;
}

Calling remote methods
function CallServer (e)
{
Try
{
if (XMLHTTP && xmlhttp. readystate!= 0)
{
Xmlhttp.abort ();
}

XMLHTTP = Getxmlhttpobj ();

if (XMLHTTP)
{
document.getElementById ("Outgroup"). Style.display = "None";
Get Query Date
var datesele = E.options[e.selectedindex].value;
document.getElementById ("date"). innerHTML = Datesele + "open-end Fund net value";

   //Constructing query connection string
    var url = "http://www.111cn.net/?newenddate=" + Datesele;
   
   //Open connection
    xmlhttp.open ("Get", url, true);
    //Set callback function
    xmlhttp.onreadystatechange = updatepage;
   //Send Request
    xmlhttp.send (null);
  }
   Else
   {
    document.getElementById ("flag"). innerHTML = " XMLHTTP object creation failed ";
  }
 }
  catch (E)
  {
   document.getElementById ("flag"). innerHTML = "Query error:" + E;
 }
 
 
 //Callback handler
 function updatepage ()
 {
  try {
  ;  if (xmlhttp.readystate = = 1)
   {
    document.getElementById ("flag"). innerHTML = "Loading connection objects ...";
  }

if (xmlhttp.readystate = 2)
{
document.getElementById ("flag"). innerHTML = "The Connection object is loaded. ";
}

if (xmlhttp.readystate = 3)
{
document.getElementById ("flag"). innerHTML = "Data acquisition ...";
}

if (xmlhttp.readystate = 4)
{
var response = Xmlhttp.responsetext;
var openvalue = response.split ("<td class=" Info-head "width=" "valign=" Top ">") [1];
var openvalue = openvalue.split ("</td></tr>") [0];
alert (Openvalue);
document.getElementById ("Out"). innerHTML = Openvalue;

var openvalue1 = response.split ("<td class=" Info-head "width=" "valign=" Top ">") [2];
var openvalue1 = openvalue1.split ("</td></tr>") [0];
document.getElementById ("Out1"). innerHTML = openvalue1;

var openvalue2 = response.split ("<td class=" Info-head "width=" "valign=" Top ">") [3];
var openvalue2 = openvalue2.split ("</td></tr>") [0];
document.getElementById ("Out2"). innerHTML = Openvalue2;

var openvalue3 = response.split ("<td class=" Info-head "width=" "valign=" Top ">") [4];
var openvalue3 = openvalue3.split ("</td></tr>") [0];
document.getElementById ("Out3"). innerHTML = Openvalue3;
document.getElementById ("flag"). innerHTML = "Query End";

document.getElementById ("Outgroup"). Style.display = "";
}
}
catch (E)
{
document.getElementById ("flag"). innerHTML = "Callback processing error:" + E;
}
}