1. 程式人生 > >Jquery——Day7(Ajax提交表單)

Jquery——Day7(Ajax提交表單)

1、建立資料庫

名稱為“zhiwen”,表為id、user、pass、email、sex、birthday、date

建立php檔案:config.php、add.php、is_user.php

(1)config.php

<?php
	//防止亂碼,初始化設定;
	header('Content-Type:text/html;charset=utf-8');
	
	//資料庫後臺設定初始化;
	define('DB_HOST','localhost');
	define('DB_USER','root');
	define('DB_PWD','root');
	define('DB_NAME','zhiwen');
	
	//連線資料庫,連線知問,設定字符集錯誤;
	
[email protected]
_connect(DB_HOST,DB_USER,DB_PWD) or die('資料庫連線失敗:'.mysql_error()); @mysql_select_db(DB_NAME) or die('資料庫錯誤:'.mysql_error()); @mysql_query('SET NAMES UTF8') or die('字符集錯誤:'.mysql_error()); ?>

(2)add.php
<?php
	//睡眠3s
	sleep(3);
	
	//引入初始化檔案
	require 'config.php';
	
	//新增sql語句;
	$query="INSERT INTO user (user,pass,email,sex,birthday,date) 
			VALUES ('{$_POST['user']}',shal('{$_POST['pass']}'),'{$_POST['email']}','{$_POST['sex']}','{$_POST['birthday']}',NOW())";
	
	mysql_query($query) or die('新增失敗!'.mysql_error());
	echo mysql_affected_rows();
	mysql_close();
?>

(3)is_user.php

2、資料載入

首先,在html中加入一個div盒子

<div id="loading">資料載入中...</div>

(1)資料載入顯示時,

	$('#loading').dialog({
		autoOpen:false,   	   //預設不顯示;
		modal:true,
		closeOnEscape:false,   //表示按Esc鍵無效果;
		resizable:false,       //不能改變大小;
		draggable:false,       //不能放大放小;
		width:180,
		height:50,				//open預設加了30px,所以80-30=50(實際距離為80)
	}).parent().parent().find('.ui-widget-header').hide();
	//表示去掉header頭部;

(2)提交處理時,顯示如下:
	/*提交處理顯示*/
		submitHandler : function (form) {
			$(form).ajaxSubmit({
				url:'add.php',
				type:'POST',
				/*提交之前*/
				beforeSubmit:function(formData,jqForm,options){
					$('#loading').dialog('open');    //顯示載入;
					$('#reg').dialog('widget').find('button').eq(1).button('disable');
				},
				/*提交成功*/
				success:function(responseText,statusText){
					if(responseText){
						$('#reg').dialog('widget').find('button').eq(1).button('enable');
						$('#loading').css('background','url(img/success.gif) no-repeat 20px center').html('資料新增成功...');
						setTimeout(function(){
							$('#loading').dialog('close');
							$('#reg').dialog('close');
							$('#reg').resetForm();
							$('#reg span .star').html('*').removeClass('succ');
							$('#loading').css('background','url(img/loading.gif) no-repeat 20px center').html('資料互動中...');
						},1000);
					}
				},
			});
		},