Hướng dẫn ajax form html - html dạng ajax

Bất kỳ ai có liên kết 0 phút đọc 0 phút đọc

Đâ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:

    

        

            
氏名
            

            
性別
            

                
 男性
                
 女性
            
          
          

            
電話番号
            

            
メールアドレス
            

          
    
    

        検素
    

2. Xây dựng code ajax

			
			$[document].ready[function[] {
				var delay = 2000;
				var targeturl = '';
				$['#btn-add'].click[function[e]{
					e.preventDefault[];
					var name = $['#name'].val[];
			        if[name == '']{
						$['.message_box'].html[
						'Enter Your Name!'
						];
						$['#name'].focus[];
			            return false;
						}
					
					var email = $['#email'].val[];
			        if[email == '']{
						$['.message_box'].html[
						'Enter Email Address!'
						];
						$['#email'].focus[];
			            return false;
						}
					if[ $["#email"].val[]!='' ]{
						if[ !isValidEmailAddress[ $["#email"].val[] ] ]{
						$['.message_box'].html[
						'Provided email address is incorrect!'
						];
						$['#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];
		};
		

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