Jquery——Day7(Ajax提交表單)
阿新 • • 發佈:2019-01-10
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);
}
},
});
},