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

Tram Ho

4 năm ago

Yêu cầu hướng dẫn của chúng tôi.

1. Hình thức html html:

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

<table>

<tr>

<td>

</td>

</tr>

<tr>

<td>メールアドレス</td>

</tr>

</table>

</div>

</form>

2. Mã số ajax mã ajax

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
			&lt;script&gt;
			$(document).ready(function() {
				var delay = 2000;
				var targeturl = '&lt;?= Router::url(["controller"=&gt;"homes","action"=&gt;"getStates"]); ?&gt;';
				$('#btn-add').click(function(e){
					e.preventDefault();
					var name = $('#name').val();
			        if(name == ''){
						$('.message_box').html(
						'&lt;span style="color:red;"&gt;Enter Your Name!&lt;/span&gt;'
						);
						$('#name').focus();
			            return false;
						}
					
					var email = $('#email').val();
			        if(email == ''){
						$('.message_box').html(
						'&lt;span style="color:red;"&gt;Enter Email Address!&lt;/span&gt;'
						);
						$('#email').focus();
			            return false;
						}
					if( $("#email").val()!='' ){
						if( !isValidEmailAddress( $("#email").val() ) ){
						$('.message_box').html(
						'&lt;span style="color:red;"&gt;Provided email address is incorrect!&lt;/span&gt;'
						);
						$('#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+"&amp;email="+email,
             success: function(data)
			 {
				 setTimeout(function() {
                    $('.message_box').html(data);
                }, delay);
				location.reload();
             }
			 });
						
				});
						
			});
            // Check email nhập
		function isValidEmailAddress(emailAddress) {
		    var pattern = /^([a-zd!#$%&amp;'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+(.[a-zd!#$%&amp;'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+)*|"((([ t]*rn)?[ t]+)?([x01-x08x0bx0cx0e-x1fx7fx21x23-x5bx5d-x7eu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|\[x01-x09x0bx0cx0d-x7fu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))*(([ t]*rn)?[ t]+)?")@(([a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]).)+([a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]).?$/i;
		    return pattern.test(emailAddress);
		};
		&lt;/script&gt;

$(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-zd!#$%&'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+(.[a-zd!#$%&'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+)*|"((([ t]*rn)?[ t]+)?([x01-x08x0bx0cx0e-x1fx7fx21x23-x5bx5d-x7eu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|\[x01-x09x0bx0cx0d-x7fu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))*(([ t]*rn)?[ t]+)?")@(([a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]).)+([a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]).?$/i;

return pattern.test(emailAddress);

};

</script>

3. Yêu cầu cơ sở dữ liệu

&lt;?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-&gt;connect_error) {
		    die("Không kết nối :" . $conn-&gt;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-&gt;query($sql) === TRUE) {
	        echo "Thêm dữ liệu thành công";
	    } else {
	        echo "Error: " . $sql . "&lt;br&gt;" . $connect-&gt;error;
	    }
	}
	//Đóng database
	$connect-&gt;close();
?&gt;

<?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();

Chia sẻ bài viết ngay