Detailed explanation of real-time verification examples of registration using jquery+ajax

Detailed explanation of real-time verification examples of registration using jquery+ajax_jquery

WBOY

Release： 2016-05-16 15:26:55

Original

1371 people have browsed it

The example in this article describes the real-time verification of registration using jquery+ajax. Share it with everyone for your reference, the details are as follows:

When we register a user, we will be prompted in real time whether the user's information is available. This is an ajax application. I have seen this implementation a long time ago. I saw it again today and recorded it O(∩_∩) Oh!

First, let’s introduce $.get in ajax. Since the usage of $.post is similar to $.get, I won’t introduce it anymore:

This is a simple GET request function to replace the complex $.ajax. The callback function can be called when the request is successful. If you need to execute a function on error, use $.ajax.

Copy code The code is as follows:

$(selector).get(url,data,success(response,status,xhr ),dataType)

Parameters	Description
url	Required. Specifies the URL to which the request will be sent.
data	Optional. Specifies the data to be sent to the server with the request.
success(response,status,xhr)	Optional. Specifies a function to run when the request succeeds. Extra parameters: response - Contains the result data from the request status - Contains the status of the request xhr - Contains XMLHttpRequest object
dataType	Optional. Specifies the data type of expected server response. By default, jQuery will make smart decisions. Possible types: "xml" "html" "text" "script" "json" "jsonp"

Request test.php web page, ignore the return value:

Copy code The code is as follows:

$.get("test.php");

More examples:

Example 1

Request test.php web page, send 2 parameters, ignore the return value:

Copy code The code is as follows:

$.get("test.php", { name: "John ", time: "2pm" } );

Example 2

Show test.php return value (HTML or XML, depending on the return value):

$.get("test.php", function(data){
 alert("Data Loaded: " + data);
});

Copy after login

Example 3

Display test.cgi return value (HTML or XML, depending on the return value), add a set of request parameters:

$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
  alert("Data Loaded: " + data);
});

Copy after login

Paste my code below:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户注册</title>
<script type="text/javascript" src="jquery/jquery-1.5.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#username").focus();
$("#username").keyup(function()
{
  name= $("#username").val();//val()方法返回或设置被选元素的值。
  if(len(name)< 4)//调用下面的自定义len函数
  $("#username1").html("<font color=red>注册名称必须大于等于2位</font>");
  else
  $("#username1").html("<font color=red>符合要求</font>");//html() 方法返回或设置被选元素的内容 (inner HTML)。
});
$("#username").blur(function(){
name= $("#username").val();
$.get("t1.php", { username:name } ,function(data){//判断数据库中是否存在此用户名 重点$.get,$.post t1.php在下面
  if(data==1) {$("#username1").html("<font color=green>符合要求</font>");}
  else {$("#username1").html("<font color=green>已被占用</font>");}
});
});
});
function len(s) {//若为汉字之类的字符则占两个
var l = 0;
var a = s.split("");
for (var i=0;i<a.length;i++) {
 if (a[i].charCodeAt(0)<299) {
 l++;
 } else {
 l+=2;
 }
}
return l;
}
</script>
</head>
<body>
<form name="fram" action="register.php" onsubmit="return docheck();">
<table width="330" border="0" align="center" cellpadding="5" bgcolor="#eeeeee">
<tr>
  <td>用户名：</td>
  <td><input name="username" type="text" id="username" /></td><td><div id="username1"></div></td>
</tr>
</table>
</form>
</body>
</html>

Copy after login

t1.php：

<&#63;php 
$link=mysql_connect("localhost","root","");
mysql_select_db("test");
mysql_query("set names utf8");//
$sql="select * from user where user='".$_GET['username']."'";//
  $result=mysql_query($sql) or die(mysql_error());
$num=mysql_affected_rows();
if($num==0)
$msg=1;
else
  $msg=0;
echo $msg;//返回值
mysql_close($link);
&#63;>

Copy after login

I hope this article will be helpful to everyone in jQuery programming.