AJAX là kỹ thuật giúp người dùng tương tác với dữ liệu trên máy lưu trữ web mà không cần tải lại trang. Bài viết này sẽ giúp bạn tạo ra một trang web chứa form nhập liệu và khi submit dữ liệu sẽ được lưu vào cơ sở dữ liệu. Đặc biệt nó sẽ dùng kỹ thuật ajax để xử lý.
Ta sẽ làm việc với ngôn ngữ PHP và MySQL.
Ta có một cơ sở dữ liệu có tên là mydba có một bảng tên form_element có cột: id, name, email, password, contact.
Đầu tiên ta sẽ tạo trang ajaxsubmit.html. Đây sẽ là trang giao diện hiển thị.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <title>Submit Form Using AJAX and jQuery</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link href="css/refreshform.css" rel="stylesheet"> <script src="script.js"></script> </head> <body> <div id="mainform"> <h2>Submit Form Using AJAX and jQuery</h2> <!-- Required div Starts Here --> <div id="form"> <h3>Fill Your Information !</h3> <div> <label>Name :</label> <input id="name" type="text"> <label>Email :</label> <input id="email" type="text"> <label>Password :</label> <input id="password" type="password"> <label>Contact No :</label> <input id="contact" type="text"> <input id="submit" type="button" value="Submit"> </div> </div> </div> </body> </html> |
Tiếp theo ta sẽ tạo trang ajaxsubmit.php. Đây là nơi sẽ diễn ra các thao tác với cơ sở dữ liệu với các bước:
- Kết nối máy chủ
- Kết nối cơ sở dữ liệu
- Thực hiện truy vấn (thêm, sửa, xem, xóa)
- Đóng kết nối
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php $connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server.. $db = mysql_select_db("mydba", $connection); // Selecting Database //Fetching Values from URL $name2=$_POST['name1']; $email2=$_POST['email1']; $password2=$_POST['password1']; $contact2=$_POST['contact1']; //Insert query $query = mysql_query("insert into form_element(name, email, password, contact) values ('$name2', '$email2', '$password2','$contact2')"); echo "Form Submitted Succesfully"; mysql_close($connection); // Connection Closed ?> |
Tập tin script.js tạo chức năng ajax
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | $(document).ready(function(){ $("#submit").click(function(){ var name = $("#name").val(); var email = $("#email").val(); var password = $("#password").val(); var contact = $("#contact").val(); // Returns successful data submission message when the entered information is stored in database. var dataString = 'name1='+ name + '&email1='+ email + '&password1='+ password + '&contact1='+ contact; if(name==''||email==''||password==''||contact=='') { alert("Please Fill All Fields"); } else { // AJAX Code To Submit Form. $.ajax({ type: "POST", url: "ajaxsubmit.php", data: dataString, cache: false, success: function(result){ alert(result); } }); } return false; }); }); |
Lệnh tạo cơ sở dữ liệu
1 2 3 4 5 6 7 8 9 | CREATE DATABASE mydba; CREATE TABLE form_element( id int(10) NOT NULL AUTO_INCREMENT, name varchar(255) NOT NULL, email varchar(255) NOT NULL, password varchar(255) NOT NULL, contact varchar(255) NOT NULL, PRIMARY KEY (id) ) |
Tập tin style style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | @import "http://fonts.googleapis.com/css?family=Fauna+One|Muli"; #form { background-color:#fff; color:#123456; box-shadow:0 1px 1px 1px #123456; font-weight:400; width:350px; margin:50px 250px 0 35px; float:left; height:500px } #form div { padding:10px 0 0 30px } h3 { margin-top:0; color:#fff; background-color:#3C599B; text-align:center; width:100%; height:50px; padding-top:30px } #mainform { width:960px; margin:50px auto; padding-top:20px; font-family:'Fauna One',serif } input { width:90%; height:30px; margin-top:10px; border-radius:3px; padding:2px; box-shadow:0 1px 1px 0 #123456 } input[type=button] { background-color:#3C599B; border:1px solid #fff; font-family:'Fauna One',serif; font-weight:700; font-size:18px; color:#fff } |
Vậy là bạn đã làm xong rồi đó.
Bạn có thể tải mã nguồn mẫu tại:
Box: http://tinyurl.com/ovfazcr
Google Drive: http://tinyurl.com/q6fgujp
Chúc các bạn thành công
Form Get (HMAK lượt dịch)
