如何用AJAX和PHP检查PostgreSQL中的用户名可用性

通过使用jQuery AJAX，你可以立即显示输入的用户名是否已经被其他用户使用。

用户不需要提交表单。

在本教程中，我展示了如何使用jQuery AJAX和PHP检查用户名是否已经存在于PostgreSQL数据库中。

下载

---

内容

1. 表结构
2. 配置
3. HTML
4. AJAX
5. jQuery
6. 输出
7. 结论

---

1.表 的结构

我在这个例子中使用了users 表格：

CREATE TABLE users (
     id serial PRIMARY KEY,
     username varchar(80) NOT NULL,
     fullname varchar(80) NOT NULL,
     email varchar(80) NOT NULL
)

---

2.2 .配置

创建一个新的config.php 文件。

完成的代码

<?php

$host = "localhost";
$user = "postgres";
$password = "root";
$dbname = "tutorial";
$con = pg_connect("host=$host dbname=$dbname user=$user password=$password");

if (!$con) {
   die('Connection failed.');
}

---

3.H TML

创建一个输入用户名的文本元素和一个<div id="uname_response"> ，使用jQuery AJAX显示可用性。

完成的代码

<div>
   <input type="text" class="textbox" id="txt_username" name="txt_username" placeholder="Enter Username" />
   <!-- Response -->
   <div id="uname_response" ></div>
</div>

---

4.A JAX

创建ajaxfile.php 文件来处理AJAX请求。

检查username 是否是POST。

如果是POST，则计算username 字段值等于$username 的记录，在users 表。

如果计数大于0，则返回Not Available 信息，否则，返回Available 信息。

完成的代码

<?php
include 'config.php';

if(isset($_POST['username'])){
   $username = $_POST['username'];

   // Check username
   $sql = "select count(*) as allcount from users where username=$1";
   $result = pg_query_params($con, $sql, array($username));
   $row = pg_fetch_assoc($result);
   $count = $row['allcount'];

   $response = "<span style='color: green;'>Available</span>";
   if($count > 0){
      $response = "<span style='color: red;'>Not Available</span>";
   }

   echo $response;
   exit;
}

---

5. jQuery

在#txt_username ，定义keyup 事件。

如果值不是空的，发送AJAX POST请求到ajaxfile.php 。传递{username: username} 作为数据。

在成功的回调中，在#uname_response ，写一个response 。

完成的代码

$(document).ready(function(){

   $("#txt_username").keyup(function(){

      var username = $(this).val().trim();

      if(username != ''){

         $.ajax({
            url: 'ajaxfile.php',
            type: 'post',
            data: {username:username},
            success: function(response){

               // Show response
               $("#uname_response").html(response);

            }
         });
      }else{
         $("#uname_response").html("");
      }

   });

});

---

6.输 出

查看输出

---

7.总 结

使用上述脚本，你可以在表单中验证用户名或电子邮件，并确保在插入记录前再次验证该值。

你可以在这里查看本教程的MySQL版本。