Tạo Submit Form Dùng Kỹ Thuật AJAX, PHP Và JQuery

Trang chủ » Submit Form Bằng Ajax » Tạo Submit Form Dùng Kỹ Thuật AJAX, PHP Và JQuery

Có thể bạn quan tâm

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ý.

submit-form-using-ajax

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ị.

<!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>
12345678910111213141516171819202122232425262728<!DOCTYPEhtml><html><head><title>SubmitFormUsingAJAXandjQuery</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 andjQuery</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
PHP <?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 ?>
12345678910111213<?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

JavaScript $(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; }); });
12345678910111213141516171819202122232425262728$(document).ready(function(){$("#submit").click(function(){varname=$("#name").val();varemail=$("#email").val();varpassword=$("#password").val();varcontact=$("#contact").val();// Returns successful data submission message when the entered information is stored in database.vardataString='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);}});}returnfalse;});});

Lệnh tạo cơ sở dữ liệu

MySQL 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) )
123456789CREATEDATABASEmydba;CREATETABLEform_element(idint(10)NOT NULLAUTO_INCREMENT,namevarchar(255)NOT NULL,emailvarchar(255)NOT NULL,passwordvarchar(255)NOT NULL,contactvarchar(255)NOT NULL,PRIMARY KEY(id))

Tập tin style style.css

CSS @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 }
123456789101112131415161718192021222324252627282930313233343536373839404142434445@import "http://fonts.googleapis.com/css?family=Fauna+One|Muli";#form {background-color:#fff;color:#123456;box-shadow:01px1px1px#123456;font-weight:400;width:350px;margin:50px250px035px;float:left;height:500px}#form div {padding:10px0030px}h3 {margin-top:0;color:#fff;background-color:#3C599B;text-align:center;width:100%;height:50px;padding-top:30px}#mainform {width:960px;margin:50pxauto;padding-top:20px;font-family:'Fauna One',serif}input {width:90%;height:30px;margin-top:10px;border-radius:3px;padding:2px;box-shadow:01px1px0#123456}input[type=button] {background-color:#3C599B;border:1pxsolid#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)

- Advertisement -

Từ khóa » Submit Form Bằng Ajax