ajax创建表格_使用WhizBase创建AJAX支持的注册表格-CSDN博客

ajax创建表格

This tutorial will discuss fancy secure registration forms, with AJAX technology support. In this article I assume you already know HTML and some JS. I will write the code using WhizBase Server Pages, so you need to know some basics in WBSP (you might look at some of my other articles on WhizBase).

本教程将讨论带有AJAX技术支持的精美安全注册表单。在本文中，我假设您已经了解HTML和一些JS。我将使用WhizBase Server Pages编写代码，因此您需要了解WBSP的一些基础知识（您可能会在WhizBase上看到我的其他一些文章）。

The Structure

结构

I will first explain the structure of our registration form, as I am using AJAX, I will not have any refresh for our page, so I will have one main page with the HTML and JS code.

首先，我将解释我们注册表格的结构，因为我正在使用AJAX，因此我的页面没有任何刷新，因此，我将使用HTML和JS代码创建一个主页。

For the validation process I will use one WhizBase file, for submitting registration data I will use another WhizBase file.

对于验证过程，我将使用一个WhizBase文件，对于提交注册数据，我将使用另一个WhizBase文件。

To store the registration information I will need a DB, and for this demonstration I will use the simplest one, Microsoft Access DB.

为了存储注册信息，我将需要一个DB，在本演示中，我将使用最简单的Microsoft Access DB。

Every registration process needs a confirmation process to reduce spam registrations. So I will need one WhizBase file for confirmation, for sending the email I will use two files (I will explain why later in this article).

每个注册过程都需要一个确认过程来减少垃圾邮件的注册。因此，我将需要一个WhizBase文件进行确认，对于发送电子邮件，我将使用两个文件（我将在本文后面解释原因）。

Now let give names, I will create default.wbsp, validate.wbsp, submit.wbsp, mail.wbsp, blank.html and confirm.wbsp. I will create reg.mdb for DB.

现在让我们命名，我将创建default.wbsp，validate.wbsp，submit.wbsp，mail.wbsp，blank.html和Confirm.wbsp。我将为数据库创建reg.mdb。

Registration Elements

注册要素

The registration form will contain a user name, first name, last name, email and password. All elements are required, so no element must be empty. The user name must be available, the password must be repeated to confirm the password and the email must be real.

注册表格将包含用户名，名字，姓氏，电子邮件和密码。所有元素都是必需的，因此任何元素都不能为空。用户名必须可用，必须重复输入密码以确认密码，并且电子邮件必须真实。

<html>
<head>
<title>Registration Form</title>
<script type="text/javascript">
function loadXMLDoc(url,rezult)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById(rezult).innerHTML=xmlhttp.responseText;
}
function Validate()
{
         loadXMLDoc('validate.wbsp?username='+document.getElementById("username").value+'&fname='+document.getElementById("fname").value+'&lname='+document.getElementById("lname").value+'&password='+document.getElementById("password").value+'&password2='+document.getElementById("password2").value+'&email='+document.getElementById("email").value,'msgs');
         if(document.getElementById('msgs').innerHTML==""){
              loadXMLDoc('submit.wbsp?wbf_username='+document.getElementById("username").value+'&wbf_fname='+document.getElementById("fname").value+'&wbf_lname='+document.getElementById("lname").value+'&wbf_password='+document.getElementById("password").value+'&wbf_email='+document.getElementById("email").value,'msgs');
         }
}
</script>
</head>
<body>
<div id="msgs"></div>
<fieldset><legend>Enter your information in the form below.</legend><br />
Username:<br />
<input type="text" name="username" id="username" size="40" maxlength="60" /><br /><br />
First Name:<br/>
<input type="text" name="fname" id="fname" size="40" maxlength="60" /><br /><br />
Last Name:<br/>
<input type="text" name="lname" id="lname" size="40" maxlength="60"/><br /><br />
Password:<br />
<input type="password" name="password" id="password" size="40" maxlength="60"/><br /><br />
Confirm Your Password:<br />
<input type="password" name="password2" id="password2" size="40" maxlength="60"/><br /><br />
E-Mail:<br />
<input type="text" name="email" id="email" size="40" maxlength="60"/><br /><br />
</fieldset>
<div align="center">
<input type="button" value="Submit" onclick="Validate();" /></div>
</body>
</html>

Let me now explain the HTML and JS code. The HTML code have the basic elements of the registration, I have input text fields to insert data needed for the registration with two password fields (for the password, and a second for confirmation). Finally I have a submit button and a div for viewing system messages.

现在让我解释一下HTML和JS代码。 HTML代码具有注册的基本元素，我有输入文本字段，可使用两个密码字段（用于密码，用于确认的第二个密码）插入注册所需的数据。最后，我有一个提交按钮和一个用于查看系统消息的div。

The JS code has two functions, the first is the AJAX JS function, the other is the validate function that I call when I submit the form.

JS代码具有两个函数，一个是AJAX JS函数，另一个是在提交表单时调用的validate函数。

You will notice I call AJAX for two reasons, one is for validating the data in the form, the second is for saving the data in the DB.

您会注意到，我之所以称呼AJAX为两个原因，其一是用于验证表单中的数据，其二是用于将数据保存在DB中。

Validation process

验证程序

I will create a file for validating form data and will name it as "validate.wbsp". In this script I need to validate data, if there is errors I must display an error message, if not, keep the output empty. The output will be returned by AJAX and displayed in the messages div.

我将创建一个用于验证表单数据的文件，并将其命名为“ validate.wbsp”。在此脚本中，我需要验证数据，如果有错误，我必须显示一条错误消息，如果没有，请保持输出为空。输出将由AJAX返回并显示在消息div中。

[FormFields]
wb_basename=reg.mdb
wb_rcdset=profile
WB_Command=Q
wb_query=username="$wbv{username}"
wb_maxrec=1
[MsgAndLbl]
WBM_NoMatch=$wbsetv{msg|}
<!--WB_BeginTemplate-->$wbif["$wbp[rc]"=1|$wbsetv[msg|The username is not available, plase choose another!<br />]|]$wbif["$wbv[username]"=""|$wbsetv[msg|$wbgetv[msg]Please write your username!<br />]|]$wbif["$wbv[fname]"=""|$wbsetv[msg|$wbgetv[msg]Please write your first name!<br />]|]$wbif["$wbv[lname]"=""|$wbsetv[msg|$wbgetv[msg]Please write your first name!<br />]|]$wbsplit[$wbv[email]|email_array|@|F]$wbsplit[$wbgetv[email_array(1)]|domain|.|F]$wbif["$wbv[password]"=""|$wbsetv[msg|$wbgetv[msg]Please insert a password!<br />]|]$wbif["$wbv[password]"<>"$wbv[password2]"|$wbsetv[msg|$wbgetv[msg]Your passwords do not match!<br />]|]$wbif[($wbcstr[$wbv[email]|@]=1) and ($wblen[$wbgetv[email_array(0)]]>0) and ($wblen[$wbgetv[email_array(1)]]>0) and ($wblen[$wbgetv[domain(0)]]>0) and (($wblen[$wbgetv[domain(1)]]>1) and ($wblen[$wbgetv[domain(1)]]<5))||$wbsetv[msg|$wbgetv[msg]Please insert a valid email address<br />]]$wbgetv[msg]

WhizBase do not recognize lines, it's code is directly ebeded in HTML, so any extra white space or break will show in the HTML, so I have removed all white spaces and breaks I do not need.

WhizBase无法识别行，它的代码直接嵌入HTML中，因此任何多余的空格或中断都将显示在HTML中，因此我删除了所有不需要的空格和中断。

Let us go through the code step by step.

让我们逐步看一下代码。

[FormFields]
wb_basename=reg.mdb
wb_rcdset=profile
WB_Command=Q
wb_query=username="$wbv{username}"
wb_maxrec=1
[MsgAndLbl]
WBM_NoMatch=$wbsetv{msg|}
<!--WB_BeginTemplate-->

Here I am connecting to my DB Access file with the record set (table) profile, making a Query command and giving a where clause option username="$wbv{username}", where $wbv{username} will show the parameter I sent by AJAX by get or post method. For WhizBase get and post are the same.

在这里，我使用记录集（表）概要文件连接到我的数据库访问文件，执行查询命令并提供where子句选项username =“ $ wbv {username}”，其中$ wbv {username}将显示我通过get或post方法由AJAX发送的参数。对于WhizBase，get和post是相同的。

I am limiting the records with 1 maximum, because I just want to check if the username already exists in the DB. If there is no records I will set the msg variable empty, I will need this variable later in the code. WBM_NoMatch gives "No Matching records" message by default, I do not want that, so I am just setting a variable.

我将记录限制为1个最大值，因为我只想检查用户名是否已存在于数据库中。如果没有记录，则将msg变量设置为空，稍后在代码中将需要此变量。 WBM_NoMatch默认情况下会给出“没有匹配记录”消息，我不希望这样，所以我只是设置一个变量。

$wbif["$wbp[rc]"=1|$wbsetv[msg|The username is not available, please choose another!<br />]|]

If the query above returns data I will give an error message that the username is not available, and save the message in the msg variable. I'm using an IF statement and check if $wbp[rc] which returns the number of records are equal to one.

如果以上查询返回数据，我将给出一条错误消息，提示用户名不可用，并将消息保存在msg变量中。我正在使用IF语句，并检查返回记录数的$ wbp [rc]是否等于1。

$wbif["$wbv[username]"=""|$wbsetv[msg|$wbgetv[msg]Please write your username!<br />]|]

In case the username is empty I give an error message to write the username. When I assign the message to the variable I must not forget the messages we have from before, so I use wbgetv in wbsetv to add the past ones also.

如果用户名是空的，我会给出一条错误消息来写用户名。当我将消息分配给变量时，我一定不要忘记以前的消息，因此我在wbsetv中使用wbgetv来添加过去的消息。

$wbif["$wbv[fname]"=""|$wbsetv[msg|$wbgetv[msg]Please write your first name!<br />]|]
$wbif["$wbv[lname]"=""|$wbsetv[msg|$wbgetv[msg]Please write your first name!<br />]|]
$wbif["$wbv[password]"=""|$wbsetv[msg|$wbgetv[msg]Please insert a password!<br />]|]

The same process as before I do for the first name, the last name and the password.

与我之前对名字，姓氏和密码的处理相同。

$wbif["$wbv[password]"<>"$wbv[password2]"|$wbsetv[msg|$wbgetv[msg]Your passwords do not match!<br />]|]

If the passwords do not match, it is also an error. WhizBase uses <> for not equal. If you put != it will provoke a syntax error.

如果密码不匹配，这也是错误。 WhizBase使用<>表示不相等。如果您输入！=，将引发语法错误。

$wbsplit[$wbv[email]|email_array|@|F]
$wbsplit[$wbgetv[email_array(1)]|domain|.|F]
$wbif[($wbcstr[$wbv[email]|@]=1) and ($wblen[$wbgetv[email_array(0)]]>0) and ($wblen[$wbgetv[email_array(1)]]>0) and ($wblen[$wbgetv[domain(0)]]>0) and (($wblen[$wbgetv[domain(1)]]>1) and ($wblen[$wbgetv[domain(1)]]<5))||$wbsetv[msg|$wbgetv[msg]Please insert a valid email address<br />]]

Checking the email if it is valid is a little more complicated process: I need to check if the email address has an @ sign, and if it has at least one character before and after the @ sign. I also check if the domain name part before the dot has at least one character, and if the TLD part is at least 2 characters but not more than four.

检查电子邮件是否有效是一个更为复杂的过程：我需要检查电子邮件地址是否带有@符号，以及@符号前后是否至少有一个字符。我还要检查点前的域名部分是否至少包含一个字符，并且TLD部分是否至少包含2个字符但不超过4个字符。

$wbgetv[msg]

Finally I display the error messages I have collected, if no error messages are provoked I will have an empty variable. This data is displayed by AJAX in my messages div.

最后，我显示我收集的错误消息，如果没有错误消息引起，我将有一个空变量。这些数据由AJAX在我的消息div中显示。

The Database

数据库

Before I go with the submitting data process, I need to show you the DB I have created. It is one DB containing one table called profile. Profile contains seven fields. The id is an auto-incremental field. The confirm field is a number type field with zero default value. The rest fields (username, fname, lname, password, email) are text type fields. I am saving the DB as "reg.mdb" access file.

在进行提交数据过程之前，我需要向您展示我创建的数据库。它是一个包含一个称为配置文件的表的数据库。配置文件包含七个字段。 id是一个自动递增的字段。确认字段是默认值为零的数字类型字段。其余字段（用户名，fname，lname，密码，电子邮件）是文本类型字段。我将数据库另存为“ reg.mdb”访问文件。

Submitting the data

提交数据

The submitting section of the code doesn't just save data to the DB, it also calls the email file to send a confirmation request email.

代码的提交部分不仅将数据保存到数据库，还调用电子邮件文件发送确认请求电子邮件。

Before I get to that, I pass the parameters in the URL using JS, a little bit different than before. I am use a wbf_ prefix for every parameter I want to add to the DB. WhizBase takes them automatically and filters them, then adds them in the location we specify.

在此之前，我使用JS传递了URL中的参数，与以前有些不同。我为要添加到数据库中的每个参数使用wbf_前缀。 WhizBase会自动获取它们并对其进行过滤，然后将它们添加到我们指定的位置。

[FormFields]
wb_basename=reg.mdb
wb_rcdset=profile
WB_Command=A
<!--WB_BeginTemplate-->$wbgeturl[mail.wbsp?id=$wbf[id]&email=$wbf[email]]You will recieve a confirmation email to finish the registration process.

This code will save the data in reg.mdb DB, in profile table using Add command. I will use wbgeturl function to call the email sending file, I am passing the id and the email of the last inserted data. By $wbf I can get the data inserted by this operation.

此代码将使用Add命令将数据保存在reg.mdb DB中的配置文件表中。我将使用wbgeturl函数调用电子邮件发送文件，我传递了ID和最后插入的数据的电子邮件。通过$ wbf，我可以获取此操作插入的数据。

I return via AJAX the message "You will receive a confirmation email to finish the registration process.".

我通过AJAX返回消息“您将收到确认电子邮件，以完成注册过程。”。

At this time I have data in the DB, but it is still not confirmed. I have created a confirm field in the DB which has by default a zero value.

目前，我的数据库中有数据，但尚未确认。我在数据库中创建了一个确认字段，默认情况下该值为零。

Sending email

发送邮件

Sending an email in WhizBase is very easy, it supports HTML by default, anything I write in this file after the "" code, will be shown in the email. So I must be careful what I write.

在WhizBase中发送电子邮件非常容易，默认情况下它支持HTML，我在“ <！-WB_BeginTemplate->”代码之后在此文件中编写的所有内容都会显示在电子邮件中。所以我必须小心我写的东西。

[FormFields]
WB_Command=P
WB_From=admin@yourdomain.com
WB_Redirect=blank.html
WB_Subject=Please confirm your registration
wb_mailserver=mail.yourdomain.com
WB_To=$wbv{email}
<!--WB_BeginTemplate-->Please click <a href="http://www.yourdomain.com/confirm.wbsp?wbf_id=$wbv[id]">here</a> to confirm your registration.

The command P is for sending custom email. I specify the email address I am sending from, as well as from which mail server, the recipient's email address, and the subject of the email. After the "" code I write everything I want to show in the email, which in this case is a link to the confirmation page, with the id of the profile I saved.

命令P用于发送自定义电子邮件。我指定了我从中发送的电子邮件地址，以及从哪个邮件服务器，收件人的电子邮件地址和电子邮件的主题。在“ <！-WB_BeginTemplate->”代码之后，我写了我想在电子邮件中显示的所有内容，在这种情况下，这是指向确认页面的链接，并带有我保存的配置文件的ID。

I call this file with the wbgeturl function, which will show me the data returned from the file called. So I need to return nothing by redirecting the page I am calling to blank.html (which is a blank file). The redirect in WhizBase is made on the server side, so I do not get the message of the email, but the blank page.

我使用wbgeturl函数调用此文件，该函数将向我显示从调用的文件返回的数据。因此，我无需通过将我正在调用的页面重定向到blank.html（这是一个空白文件）来返回任何内容。 WhizBase中的重定向是在服务器端进行的，因此我没有收到电子邮件的消息，而是空白页。

Confirmation process

确认过程

When the guest makes a registration he will receive my email for confirmation, the link to the confirmation must be clicked, which will call my file for confirmation.

来宾进行注册后，他将收到我的确认电子邮件，必须单击确认链接，该链接将调用我的文件进行确认。

[FormFields]
wb_basename=reg.mdb
wb_rcdset=profile
WB_Command=U
WB_UID=id
WB_FORCED=wbf_confirm=1
<!--WB_BeginTemplate-->Now you can login to the system!

The confirmation will update the DB, and put value 1 in the field confirm for the specified profile. Updating the DB is simple, I specify the DB name, the recordset (table) name, the U command for update, I specify which field is the unique identifier for this process. In our case it is ID. And I will force one parameter as it is sent with the URL call, it is wbf_confirm = 1.

确认将更新数据库，并在字段中为指定的配置文件输入值1。更新数据库很简单，我指定数据库名称，记录集（表）名称，用于更新的U命令，我指定哪个字段是此过程的唯一标识符。在我们的例子中是ID。然后，我将强制通过URL调用发送一个参数，它是wbf_confirm = 1。

Finally I tell the guest that he has become a user. In the next article I will show you how to make a Login in WhizBase code.

最后，我告诉来宾他已经成为用户。在下一篇文章中，我将向您展示如何在WhizBase代码中进行登录。

For more information email me at: NurAzije [at] Gmail [dot] com

有关更多信息，请给我发送电子邮件：NurAzije [at] Gmail [dot] com

Or visit the WhizBase official site at www.whizbase.com

或访问WhizBase官方网站www.whizbase.com

NurAzije is a PHP and WhizBase programmer, who at the time of article publication is working in partnership with WhizBase on several projects.