/ / Php cơ bản / Comments (8)

Submit form sử dụng jQuery Ajax và php không cần load trang

Trong bài viết về jQuery ajax toàn tập mình đã giới thiệu cho các bạn cách sử dụng ajax trong jquery.Trong bài hôm nay mình sẽ ứng dụng thực tế cho việc submit form gửi dữ liệu lên server mà không cần load lại trang thông qua hàm ajax trong jQuery ($.ajax())

Submit form sử dụng jQuery Ajax và php không cần load trang

Submit Form Without Page Refresh Using jQuery, Ajax and PHP

Sử dụng jQuery Ajax và php để gửi dữ liệu trong form

– Bước 1: Trước tiên chúng ta sẽ tạo 1 form login như sau:

<form method="post" id="form_login">
	<table>
		<tr>
			<td>
			    <input type="text" name="username" id="username" placeholder="Tài khoản" />
			</td>
		</tr>
		<tr>
			<td>
			     <input type="text" name="password" id="password" placeholder="Mật khẩu" />
			</td>
		</tr>
		<tr>
			<td align="center">
			     <button id="button_login" type="submit">Login</button>
			</td>
		</tr>
	</table>
</form>

– Bước 2: Tiếp theo chúng ta sẽ sử dụng thư viện jquery mới nhất chèn vào website

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

– Bước 3: Xây dựng code jQuery ajax để thực hiện kiểm tra dữ liệu trong form và gửi dữ liệu trong form lên server

<script type="text/javascript">
$(document).ready(function()
{	
	//khai báo nút submit form
	var submit   = $("button[type='submit']");
    
	//khi thực hiện kích vào nút Login
	submit.click(function()
	{
		//khai báo các biến
		var username = $("input[name='username']").val(); //lấy giá trị input tài khoản
		var password = $("input[name='password']").val(); //lấy giá trị input mật khẩu
		
		//kiem tra xem da nhap tai khoan chua
		if(username == ''){
			alert('Vui lòng nhập tài khoản');
			return false;
		}
		
		//kiem tra xem da nhap mat khau chua
		if(password == ''){
			alert('Vui lòng nhập mật khẩu');
			return false;
		}
		
		//lay tat ca du lieu trong form	login
		var data = $('form#form_login').serialize();
		//su dung ham $.ajax()
		$.ajax({
		type : 'POST', //kiểu post
		url  : 'submit.php', //gửi dữ liệu sang trang submit.php
		data : data,
		success :  function(data)
			   {						
					if(data == 'false')
					{
						alert('Sai tên hoặc mật khẩu');
					}else{
						$('#content').html(data);
					}
			   }
		});
		return false;
	});
});
</script>

Bước 4: xây dựng file submit.php để xử lý dữ liệu

<?php
if($_POST)
{
	$username = trim($_POST['username']);
	$password = trim($_POST['password']);
	//neu dang nhap dung
	if($username == '111111' && $password == '111111')
	{
?> 
<table >
    <tr>
		<td colspan="2">Đăng nhập thành công</td>
    </tr>
    <tr>
		<td><strong>Xin chào:</strong> </td>
		<td><?php echo $username ?></td>
    </tr> 
</table>
<?php
	}else{
	    //neu dang nhap sai
	    echo 'false';
	}
}
?>


25/02/2016
Tags:
Written by nobitacnt

Trong bài viết không tránh khỏi những câu từ chưa chính xác,mong nhận được sự góp ý để website hoàn thiện hơn.Nếu thấy bài viết có ích với bạn hãy like và share để ủng hộ nhé :D.

Bài viết chùng chuyên mục

8 Comments

  1. Phú says:
     /  Reply

    cám ơn đã chia sẻ

  2. Tiến says:
     /  Reply

    Code trên không load được mysql.

    • nobitacnt says:
       /  Reply

      uhm, ví dụ trên mình làm minh họa cho việc sử dụng ajax thế nào thôi bạn,bạn chỉ cần kết nối csdl và kiểm tra là được

  3. aturm999 says:
     /  Reply

    hiển thị lên form thì sao.

  4. Thien Nguyen says:
     /  Reply

    Cho em hoi tai sao toi dong $.ajax({}) no luon return ve false. Co ai giai thich cho em hieu duoc khong. Xin loi may em khong co unikey

  5. Minh says:
     /  Reply

    bạn ơi nếu như mình dùng pop-up cho login form thì làm sao để cho nó return false mà vẫn ở pop-up login chứ không phải quay về trang chủ vậy bạn?

  6. in ly sứ says:
     /  Reply

    Cảm ơn bạn. Đang tìm cái này cho website mà chưa làm được :(

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL