Xây dựng ajax để trỏ dữ liệu từ form và trả về content đã nhập từ form

Đây là bài hướng dẫn xây dựng 1 form mà khi nhập dữ liệu vào form, sẽ tự động trả lại content vừa nhập .

1. Xây dựng form html:

<form class="form-info" action="" method="post">
    <table>
        <tr>
            <td>氏名</td>
            <td><input type="text" id="name" name="name" value=""></td>
            <td>性別</td>
            <td>
                <div class="radio-male"><input type="radio" name="sex" value="1" checked><span> 男性</span></div>
                <div class="female"><input type="radio" name="sex" value="0"><span> 女性</span></div>
            </td>
          </tr>
          <tr>
            <td>電話番号</td>
            <td><input type="tel" name="phone" value=""></td>
            <td>メールアドレス</td>
            <td><input id="email" type="text" name="email" value=""></td>
          </tr>
    </table>
    <div class="list-button">
        <button  id="btn-add" type="submit" class="btn" >検素</button>
    </div>
</form>

2. Xây dựng code ajax

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
			<script>
			$(document).ready(function() {
				var delay = 2000;
				var targeturl = '<?= Router::url(["controller"=>"homes","action"=>"getStates"]); ?>';
				$('#btn-add').click(function(e){
					e.preventDefault();
					var name = $('#name').val();
			        if(name == ''){
						$('.message_box').html(
						'<span style="color:red;">Enter Your Name!</span>'
						);
						$('#name').focus();
			            return false;
						}
					
					var email = $('#email').val();
			        if(email == ''){
						$('.message_box').html(
						'<span style="color:red;">Enter Email Address!</span>'
						);
						$('#email').focus();
			            return false;
						}
					if( $("#email").val()!='' ){
						if( !isValidEmailAddress( $("#email").val() ) ){
						$('.message_box').html(
						'<span style="color:red;">Provided email address is incorrect!</span>'
						);
						$('#email').focus();
						return false;
						}
						}
						$.ajax
			({
             type: "POST",
			 url: "app/webroot/ajax.php", // nhập link của trang xử lí dữ liệu
             data: "name="+name+"&email="+email,
             success: function(data)
			 {
				 setTimeout(function() {
                    $('.message_box').html(data);
                }, delay);
				location.reload();
             }
			 });
						
				});
						
			});
            // Check email nhập
		function isValidEmailAddress(emailAddress) {
		    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
		    return pattern.test(emailAddress);
		};
		</script>

3. Xây dựng ajax.php xử lí nhập dữ liệu vào database

<?php
/*
Author: Javed Ur Rehman
Website: https://www.allphptricks.com
*/

if ( ($_POST['name']!="")){
$name = $_POST['name'];
var_dump($name);
echo $name;
}
		$username = "root"; // Khai báo username
		$password = "";      // Khai báo password
		$server   = "localhost";   // Khai báo server
		$dbname   = "dadabase_cakephp";      // Khai báo database

		// Kết nối database tintuc
		$connect = new mysqli($server, $username, $password, $dbname);

		//Nếu kết nối bị lỗi thì xuất báo lỗi và thoát.
		if ($connect->connect_error) {
		    die("Không kết nối :" . $conn->connect_error);
		    exit();
		}

		//Khai báo giá trị ban đầu, nếu không có thì khi chưa submit câu lệnh insert sẽ báo lỗi
		$name = "";
		$sex = 0;
		$phone = "";
		$email = "";

		//Lấy giá trị POST từ form vừa submit

		if ($_SERVER["REQUEST_METHOD"] == "POST") {
	    if(isset($_POST["name"])) { $name = $_POST['name']; }
	    if(isset($_POST["sex"])) { $sex = $_POST['sex'];  }
	    if(isset($_POST["phone"])) { $phone = $_POST['phone']; }
	    if(isset($_POST["email"])) { $email = $_POST['email']; }

		$sex = (int)$sex;

	    //Code xử lý, insert dữ liệu vào table
	    $sql = "INSERT INTO customers (NAME, sex, phone, email)
	    VALUES ('$name', '$sex', '$phone', '$email')";

	    if ($connect->query($sql) === TRUE) {
	        echo "Thêm dữ liệu thành công";
	    } else {
	        echo "Error: " . $sql . "<br>" . $connect->error;
	    }
	}
	//Đóng database
	$connect->close();
?>