Ajax Register Form (PHP+MySQL & ASP+Access) |
Ajax Register Form (PHP+MySQL & ASP+Access) ตัวอย่างการเขียน Ajax ในการควบคุม Form การสมัครสมาชิก (Register Form) วิธีนี้สามารถตรวจสอบความถูกต้องของข้อมูลได้โดยไม่ต้อง Refresh หน้าเว็บไซต์ และสามารถทำงานได้อย่างรวดเร็วกว่าการเขียนใยระบบเดิม
PHP & MySQL
AjaxPHPRegister1.php
<?php
/*** By Weerachai Nukitram***/
/*** http://www.ThaiCreate.Com ***/
?>
<html>
<head>
<title>ThaiCreate.Com Ajax Tutorial</title>
</head>
<script language="JavaScript">
var HttPRequest = false;
function doCallAjax() {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var url = 'AjaxPHPRegister2.php';
var pmeters = "tUsername=" + encodeURI( document.getElementById("txtUsername").value) +
"&tPassword=" + encodeURI( document.getElementById("txtPassword").value ) +
"&tName=" + encodeURI( document.getElementById("txtName").value ) +
"&tEmail=" + encodeURI( document.getElementById("txtEmail").value );
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
if(HttPRequest.responseText == 'Y')
{
window.location = 'AjaxPHPRegister3.php';
}
else
{
document.getElementById("mySpan").innerHTML = HttPRequest.responseText;
}
}
}
}
</script>
<body>
<h1>Register Form</h1>
<form name="frmMain">
<span id="mySpan"></span>
<table width="274" border="1">
<tr>
<th width="117">
<div align="left">Username</div></th>
<th><input type="text" name="txtUsername" id="txtUsername" size="20"></th>
</tr>
<tr>
<th width="117">
<div align="left">Password</div></th>
<th><input type="password" name="txtPassword" id="txtPassword" size="20"></th>
</tr>
<tr>
<th width="117">
<div align="left">Name</div></th>
<th><input type="text" name="txtName" id="txtName" size="20"></th>
</tr>
<tr>
<th width="117">
<div align="left">Email</div></th>
<th width="236"><input type="text" name="txtEmail" id="txtEmail" size="20"></th>
</tr>
</table>
<br>
<input name="btnRegister" type="button" id="btnRegister" OnClick="JavaScript:doCallAjax();" value="Register">
</form>
</body>
</html>
AjaxPHPRegister2.php
<?php
/*** By Weerachai Nukitram ***/
/*** http://www.ThaiCreate.Com ***/
$strUsername = trim($_POST["tUsername"]);
$strPassword = trim($_POST["tPassword"]);
$strName = trim($_POST["tName"]);
$strEmail = trim($_POST["tEmail"]);
//*** Check Username ***//
if(trim($strUsername) == "")
{
echo "<font color=red>**</font> Plase input [Username]";
exit();
}
//*** Check Password ***//
if(trim($strPassword) == "")
{
echo "<font color=red>**</font> Plase input [Password]";
exit();
}
//*** Check Name ***//
if(trim($strName) == "")
{
echo "<font color=red>**</font> Plase input [Name]";
exit();
}
//*** Check Email ***//
if(trim($strEmail) == "")
{
echo "<font color=red>**</font> Plase input [Email]";
exit();
}
$objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
$objDB = mysql_select_db("mydatabase");
//*** Check Username (already exists) ***//
$strSQL = "SELECT * FROM account WHERE Username = '".$strUsername."' ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$objResult = mysql_fetch_array($objQuery);
if($objResult)
{
echo "<font color=red>**</font> Username [$strUsername] already exists";
}
else
{
$strSQL = "INSERT INTO account ";
$strSQL .="(Username,Password,Name,Email) ";
$strSQL .="VALUES ";
$strSQL .="('".$strUsername."','".$strPassword."' ";
$strSQL .=",'".$strName."','".$strEmail."') ";
$objQuery = mysql_query($strSQL);
if($objQuery)
{
echo "Y"; // Finish Register Return "Y"
}
else
{
echo "<font color=red>**</font> Can not register";
}
}
mysql_close($objConnect);
?>
AjaxPHPRegister3.php
<?php
/*** By Weerachai Nukitram***/
/*** http://www.ThaiCreate.Com ***/
?>
<html>
<head>
<title>ThaiCreate.Com Ajax Tutorial</title>
</head>
<body>
<h1>Register Finish</h1>
</body>
</html>
Screenshot
ASP & Access
AjaxASPRegister1.asp
<%
'*** By Weerachai Nukitram ***'
'*** http://www.ThaiCreate.Com ***'
%>
<html>
<head>
<title>ThaiCreate.Com Ajax Tutorial</title>
</head>
<script language="JavaScript">
var HttPRequest = false;
function doCallAjax() {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var url = 'AjaxASPRegister2.asp';
var pmeters = "tUsername=" + encodeURI( document.getElementById("txtUsername").value) +
"&tPassword=" + encodeURI( document.getElementById("txtPassword").value ) +
"&tName=" + encodeURI( document.getElementById("txtName").value ) +
"&tEmail=" + encodeURI( document.getElementById("txtEmail").value );
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
if(HttPRequest.responseText == 'Y')
{
window.location = 'AjaxASPRegister3.asp';
}
else
{
document.getElementById("mySpan").innerHTML = HttPRequest.responseText;
}
}
}
}
</script>
<body>
<h1>Register Form</h1>
<form name="frmMain">
<span id="mySpan"></span>
<table width="274" border="1">
<tr>
<th width="117">
<div align="left">Username</div></th>
<th><input type="text" name="txtUsername" id="txtUsername" size="20"></th>
</tr>
<tr>
<th width="117">
<div align="left">Password</div></th>
<th><input type="password" name="txtPassword" id="txtPassword" size="20"></th>
</tr>
<tr>
<th width="117">
<div align="left">Name</div></th>
<th><input type="text" name="txtName" id="txtName" size="20"></th>
</tr>
<tr>
<th width="117">
<div align="left">Email</div></th>
<th width="236"><input type="text" name="txtEmail" id="txtEmail" size="20"></th>
</tr>
</table>
<br>
<input name="btnRegister" type="button" id="btnRegister" OnClick="JavaScript:doCallAjax();" value="Register">
</form>
</body>
</html>
AjaxASPRegister2.asp
<%
'*** By Weerachai Nukitram ***'
'*** http://www.ThaiCreate.Com ***'
Option Explicit
Dim strUsername,strPassword,strName,strEmail
strUsername = Trim(Request.Form("tUsername"))
strPassword = Trim(Request.Form("tPassword"))
strName = Trim(Request.Form("tName"))
strEmail = Trim(Request.Form("tEmail"))
'*** Check Username ***'
If Trim(strUsername) = "" Then
Response.write("<font color=red>**</font> Plase input [Username]")
Response.End
End IF
'*** Check Password ***'
If Trim(strPassword) = "" Then
Response.write("<font color=red>**</font> Plase input [Password]")
Response.End
End IF
'*** Check Name ***'
If Trim(strName) = "" Then
Response.write("<font color=red>**</font> Plase input [Name]")
Response.End
End IF
'*** Check Email ***'
If Trim(strEmail) = "" Then
Response.write("<font color=red>**</font> Plase input [Email]")
Response.End
End IF
Dim Conn,strSQL,objRec,objExec
Set Conn = Server.Createobject("ADODB.Connection")
Conn.Open "DRIVER=Microsoft Access Driver (*.mdb);DBQ=" & Server.MapPath("db/mydatabase.mdb"),"" , ""
'*** Check Username (already exists) ***'
strSQL = "SELECT * FROM account WHERE Username = '" & strUsername & "' "
Set objRec = Conn.Execute(strSQL)
If Not objRec.EOF Then
Response.write("<font color=red>**</font> Username [strUsername] already exists")
Else
strSQL = ""
strSQL = strSQL &"INSERT INTO account "
strSQL = strSQL &"(Username,Password,Name,Email) "
strSQL = strSQL &"VALUES "
strSQL = strSQL &"('"&strUsername&"','"&strPassword&"'"
strSQL = strSQL &",'"&strName&"','"&strEmail&"') "
Set objExec = Conn.Execute(strSQL)
If Err.Number = 0 Then
Response.write("Y") ' Finish Register Return "Y"
Else
Response.write("<font color=red>**</font> Can not register")
End If
Conn.Close()
Set objExec = Nothing
End IF
Set Conn = Nothing
%>
AjaxASPRegister3.asp
<%
'*** By Weerachai Nukitram***'
'*** http://www.ThaiCreate.Com ***'
%>
<html>
<head>
<title>ThaiCreate.Com Ajax Tutorial</title>
</head>
<body>
<h1>Register Finish</h1>
</body>
</html>
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน 
Load balance : Server 01
