Learn AJAX from scratch and create automatic verification forms
This article mainly introduces the zero-based learning of AJAX to create automatic verification forms. Friends who need it can refer to it
Traditional web pages detect whether the user name is occupied when registering. Traditional verification is obvious Slow and clumsy.
When ajax appeared, this experience has been greatly improved, because when the user fills in the form, the signed form items have been sent to the server, and then the data is queried based on the content filled in by the user. The query number is automatically prompted without page refresh. Applications like this greatly improve the user experience. This section briefly introduces how to create automatic verification forms. Analyze the role of ajax in principle.
1. Build the framework
First build the html framework
<form name="register"> <p><label for = "User">输用户名<input type="text" name="User" id="User"></label><span id="UserResult"></span></p> <p><label for = "passwd1">输入密码<input type="password" name="passwd1" id="passwd1"></label></p> <p><label for = "passwd2">重复输入<input type="password" name="passwd2" id="passwd2"></label></p> <p><input type="submit" value="注册"></p> <p><input type="reset" value="重置"></p> </form>
2. Establish an asynchronous request
When the user finishes entering the "user name" and starts to enter other forms, background verification is performed. The code is as follows:
Enter user name
In the function startCheck(), directly send the this keyword and pass the text box object itself as a parameter, and the function itself first determines whether the user input is empty. If it is empty, Then return directly, focus on the username text box, and give corresponding prompts.
function startCheck(oInput){
//判断是否有输入，没有输入则直接返回。
if(!oInput.value){
oInput.focus();//聚焦到用户名文本框
document.getElementById("User").innerHTML="用户名不能为空";
return;
}
//创建异步请求
//....
}When the user enters the username, use toLowerCase() to convert it to lowercase letters and establish an asynchronous request.
The showResult() function is used to display the responseText text returned by the server processing.
<script type="text/javascript">
var xmlHttp;
function createXMLHttprequest() {
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
function startCheck(oInput) {
//判断是否有输入，没有输入则直接返回。
if (!oInput.value) {
oInput.focus(); //聚焦到用户名文本框
document.getElementById("User").innerHTML = "用户名不能为空";
return;
}
//创建异步请求
createXMLHttpRequest();
var sUrl = "1-9.aspx?user=" + oInput.value.toLowerCase() + "×tamp=" + new Date().getTime();
xmlHttp.open("GET", sUrl, true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
showResult(xmlHttp.responseText); //显示服务结果
}
xmlHttp.send(null);
}
</script>3. Server processing
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
Response.CacheControl = "no-cache";
Response.AddHeader("Pragma","no-cache");
if(Request["user"]=="isaac")
Response.Write("Sorry, " + Request["user"] + " already exists.");
else
Response.Write(Request["user"]+" is ok.");
%>4. Display the results of asynchronous query
When the user enters other items in the form, the asynchronous return result is already in It was done quietly in the background.
function showResult(sText) {
var oSpan = document.getElementById("UserResult");
oSpan.innerHTML = sText;
if (sText.indexOf("already exists") >= 0)
//如果用户名已被占用
oSpan.style.color = "red";
else
oSpan.style.color = "black";
}The above code displays the results returned by the server.
The complete code of this case
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Implement drop-down box linkage display data based on Ajax
Detailed explanation of ajax synchronization and asynchronousness in jquery
ajax asynchronous upload in jquery
The above is the detailed content of Learn AJAX from scratch and create automatic verification forms. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to solve the 403 error encountered by jQuery AJAX request
Feb 20, 2024 am 10:07 AM
Title: Methods and code examples to resolve 403 errors in jQuery AJAX requests. The 403 error refers to a request that the server prohibits access to a resource. This error usually occurs because the request lacks permissions or is rejected by the server. When making jQueryAJAX requests, you sometimes encounter this situation. This article will introduce how to solve this problem and provide code examples. Solution: Check permissions: First ensure that the requested URL address is correct and verify that you have sufficient permissions to access the resource.
How to solve jQuery AJAX request 403 error
Feb 19, 2024 pm 05:55 PM
jQuery is a popular JavaScript library used to simplify client-side development. AJAX is a technology that sends asynchronous requests and interacts with the server without reloading the entire web page. However, when using jQuery to make AJAX requests, you sometimes encounter 403 errors. 403 errors are usually server-denied access errors, possibly due to security policy or permission issues. In this article, we will discuss how to resolve jQueryAJAX request encountering 403 error
Linux Tips: Cancel automatic indentation when pasting in vim
Mar 07, 2024 am 08:30 AM
Preface: vim is a powerful text editing tool, which is very popular on Linux. Recently, I encountered a strange problem when using vim on another server: when I copied and pasted a locally written script into a blank file on the server, automatic indentation occurred. To use a simple example, the script I wrote locally is as follows: aaabbbcccddd. When I copy the above content and paste it into a blank file on the server, what I get is: aabbbcccddd. Obviously, this is what vim does automatically for us. Format indentation. However, this automatic is a bit unintelligent. Record the solution here. Solution: Set the .vimrc configuration file in our home directory, new
PHP and Ajax: Building an autocomplete suggestion engine
Jun 02, 2024 pm 08:39 PM
Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.
Specific method to create film movement effect in PPT
Mar 26, 2024 pm 04:00 PM
1. Start PPT, create a new blank document, select all text boxes and delete them. 2. Execute the Insert-Shape command, drag a rectangle in the document, and fill the shape with black. 3. Drag the rectangle to elongate it, execute the Insert-Shape command, drag out the small square, and set the fill color to white. 4. Copy and paste the small squares one by one so that the top and bottom are evenly distributed on both sides of the film. After selecting them all with ctrl+a, right-click and select Group. 5. Execute the Insert-Picture command, find the picture to be inserted in the pop-up dialog box, click to open, and adjust the size and position of the picture. 6. Repeat step 5 to insert and set the remaining pictures in order to form a film picture. 7. Select the film, execute animation-add animation command
Automount drives on Linux
Mar 20, 2024 am 11:30 AM
If you are using a Linux operating system and want the system to automatically mount the drive on boot, you can do this by adding the device's unique identifier (UID) and mount point path to the fstab configuration file. fstab is a file system table file located in the /etc directory. It contains information about the file systems that need to be mounted when the system starts. By editing the fstab file, you can ensure that the required drives are loaded correctly every time the system starts, thus ensuring stable system operation. Automatically mounting drivers can be conveniently used in a variety of situations. For example, I plan to back up my system to an external storage device. To achieve automation, ensure that the device remains connected to the system, even at startup. Likewise, many applications will directly
Operation guide for creating mobile Excel tables
Feb 18, 2024 pm 02:41 PM
Mobile Excel table creation tutorial With the popularity of mobile devices and the continuous advancement of technology, mobile phones have become one of the indispensable tools in our daily life and work. Using Excel spreadsheets on your mobile phone can easily record, calculate and analyze data and improve work efficiency. This article will share with you the basic operations and techniques for creating mobile Excel tables. 1. Choose the right application. There are many mobile Excel applications on the market to choose from, such as GoogleSheets, Micro
How to make a tomato novel cover
Feb 23, 2024 pm 01:55 PM
How to make the cover of Tomato novel? You can make exclusive novel cover in Tomato novel, but most friends don’t know how to make the cover of Tomato novel. Next is the picture of how to make the cover of Tomato novel brought by the editor to the players. Tutorial, interested players come and take a look! Tomato Novel usage tutorial How to make a Tomato Novel cover 1. First open the Tomato Novel APP, enter the work management page to create a new book, and select the [Cover Template] as shown by the arrow below; 2. Then enter the cover template page and select your favorite cover Template; 3. After finally selecting the cover, click [Confirm] in the upper right corner.
