Jquery——Day7（Ajax提交表单）

朴灿烈づ我的快乐病毒、 2022-07-16 14:17 239阅读 0赞

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');
    	
    	//连接数据库，连接知问，设置字符集错误；
    	$conn=@mysql_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);
    					}
    				},
    			});
    		},