Kiểm tra sự tồn tại của username với Ajax sử dụng Jquery

Kiểm tra sự tồn tại của username sử dụng ajax sẽ tiết kiệm thời gian hơn rất nhiều bởi nó không phải post back lại server, cũng như load lại trang. Bài viết sau sẽ hướng dẫn bạn làm việc này với Ajax.

I. Database
Thiết kế cơ sở dữ liệu cái nhỉ, ở đây để đơn giản, tôi chỉ thiết kế một bảng có một cột đó là username, còn bạn có thể thêm bất cứ thứ gì bạn muốn, ở đây chỉ là demo thôi nhé.

create table users_tb( username varchar(50) )

insert into users_tb (username) values ('imarasa')

create table users_tb( username varchar(50) )

insert into users_tb (username) values ('imarasa')

II. Webpage
Trong Visual Studio, bạn tạo mới một website. Ở trang default.aspx, bạn thêm một textbox, một image, và một thẻ p để hiển thị kết quả:

<div class="content">
        <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
        <img src="ch.png" id="img" alt="Check" title="Check Availability" />
        <p id="lblAvailable">Type Uasername</p>
</div>

<asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>

<p id="lblAvailable">Type Uasername</p>

</div>

Thiết kế style cho nó nhé:

.content{  margin:50px auto; text-align:center; width:622px; }

#txtUsername { padding:10px; border:solid 1px #cccccc; width:300px;

color:#555555;  font: 18pt tahoma; float:left;}

#lblAvailable { padding:11px; margin:0 10px; border:solid 1px #cccccc;
                background-color:#ffff00; width:200px; color:#555555;
                font: 18pt tahoma; float:right; display:none; }
#img { float:left; cursor:pointer; }

.content{ margin:50px auto; text-align:center; width:622px; }

#txtUsername { padding:10px; border:solid 1px #cccccc; width:300px;

color:#555555; font: 18pt tahoma; float:left;}

#lblAvailable { padding:11px; margin:0 10px; border:solid 1px #cccccc;

background-color:#ffff00; width:200px; color:#555555;

font: 18pt tahoma; float:right; display:none; }

#img { float:left; cursor:pointer; }

III. Webservice
Bạn thêm một webservice cho website trên, và lưu ý trong code behind bạn phải cho phép nó gọi script từ máy client:

[System.Web.Script.Services.ScriptService]

1	[System.Web.Script.Services.ScriptService]

Sau đó tạo một hàm để lấy thông tin trong database:

[WebMethod]
public string getAvailability(string Username)
{
    string result = "";
    string constr = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["conn"].ConnectionString; ;
    SqlConnection con = new SqlConnection(constr);
    SqlCommand cmd = con.CreateCommand();
    cmd.CommandText = "select * from users_tb where username like '" + Username + "'";
    try
    {
        con.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
            result = "Not Available";
        else
            result = "Available";
        con.Close();
        return result;
    }
    catch
    {
        return null;
    }
}

[WebMethod]

public string getAvailability(string Username)

{

string result = "";

string constr = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["conn"].ConnectionString; ;

SqlConnection con = new SqlConnection(constr);

SqlCommand cmd = con.CreateCommand();

cmd.CommandText = "select * from users_tb where username like '" + Username + "'";

try

{

con.Open();

SqlDataReader dr = cmd.ExecuteReader();

if (dr.HasRows)

result = "Not Available";

else

result = "Available";

con.Close();

return result;

}

catch

{

return null;

}

IV. Jquery
Bước quan trọng đây rồi, trong thẻ head bạn thêm đoạn code sau để cho phép trang web sử dụng jquery

<script src="jquery-1.6.2.min.js" type="text/javascript"></script>

1	<script src="jquery-1.6.2.min.js" type="text/javascript"></script>

Và cuối cùng là đoạn Jquery để hiển thị thông báo ra trang default.aspx

<script type="text/javascript">
    $(document).ready(function() {
        $('#img').click(function() {
            $('#lblAvailable').show();
            //if there is on text
            if ($('#txtUsername').val().length == 0) {
                $('#lblAvailable').html("Type Uasername");
                $('#lblAvailable').css("background-color", "#ffff00");
            }
            else {
                $('#lblAvailable').html("Checking,,");
                $.ajax({ type: "POST",
                    url: "WebService.asmx/getAvailability", //web service and funtion name
                    data: "{Username:'" + $('#txtUsername').val() + "'}", // passing parameter
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(response) {
                        var result = response.d;
                        $('#lblAvailable').html(result);
                        if (result == "Available")
                            $('#lblAvailable').css("background-color", "#00db00");
                        else
                            $('#lblAvailable').css("background-color", "#ff0000");
                    },
                    error: function(msg) {
                        $('#lblAvailable').html("Try again");
                    }
                });
            }
        });
    });
</script>

$(document).ready(function() {

$('#img').click(function() {

$('#lblAvailable').show();

//if there is on text

if ($('#txtUsername').val().length == 0) {

$('#lblAvailable').html("Type Uasername");

$('#lblAvailable').css("background-color", "#ffff00");

}

else {

$('#lblAvailable').html("Checking,,");

$.ajax({ type: "POST",

url: "WebService.asmx/getAvailability", //web service and funtion name

data: "{Username:'" + $('#txtUsername').val() + "'}", // passing parameter

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function(response) {

var result = response.d;

$('#lblAvailable').html(result);

if (result == "Available")

$('#lblAvailable').css("background-color", "#00db00");

else

$('#lblAvailable').css("background-color", "#ff0000");

error: function(msg) {

$('#lblAvailable').html("Try again");

}

});

}

});

</script>

OK!. tới lượt bạn đó, thử xem!

Kiểm tra sự tồn tại của username với Ajax sử dụng Jquery

Like this:

Có liên quan

Nguyễn Trung Hiếu

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu