知问前端——Ajax提交表单

最新推荐文章于 2024-11-10 22:45:39 发布
最新推荐文章于 2024-11-10 22:45:39 发布
阅读量126 收藏
点赞数
文章标签： 前端 php 数据库 ViewUI
原文链接：http://www.cnblogs.com/yerenyuan/p/5467427.html
版权

   本文，运用两大表单插件，完成数据表新增的工作。

   一、创建数据库

   创建一个数据库，名称为：zhiwen，表——user表，字段依次为：id、name、pass、email、sex、birthday、date。

   本人是使用的Navicat for MySQL创建的user表， user表的结构如下：

  

   所需的PHP文件：config.php、add.php。(本人没学过php，所以不过多解释)

   config.php：

<?php
    header('Content-Type:text/html; charset=utf-8'); //防止乱码
    
    define('DB_HOST', 'localhost');
    define('DB_USER', 'root');
    define('DB_PWD', 'yezi');
    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());
?>

   add.php：

<?php
    sleep(3); //睡眠3秒，以供测试
    require 'config.php';
    
    $query = "INSERT INTO user (name, pass, email, sex, birthday, date)
              VALUES ('{$_POST['user']}', sha1('{$_POST['pass']}'), '{$_POST['email']}', '{$_POST['sex']}', '{$_POST['birthday']}', NOW())";
    
    mysql_query($query) or die('新增失败！'.mysql_error());
    
    echo mysql_affected_rows(); //正确插入返回1，报错返回错误信息
    
    mysql_close();
?>

   二、Loading制作

   在提交表单的时候，用于网络速度问题，可能会出现不同时间延迟。所以，为了更好的用户体验，在提交等待过程中，设置loading是非常有必要的。

   index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知问前端</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="header">
        <div class="header_main">
            <h1>知问</h1>
            <div class="header_search">
                <input type="text" name="search" class="search" />
            </div>
            <div class="header_button">
                <button id="search_button">查询</button>
            </div>
            <div class="header_member">
                <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>
            </div>
        </div>
    </div>
    
    <form id="reg" action="123.html" title="会员注册">
        <ol class="reg_error"></ol>
        <p>
            <label for="user">账号：</label>
            <input type="text" name="user" class="text" id="user"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label for="pass">密码：</label>
            <input type="password" name="pass" class="text" id="pass"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label for="email">邮箱：</label>
            <input type="text" name="email" class="text" id="email"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label>性别：</label>
            <input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male">男</label></input>
            <input type="radio" name="sex" id="female" value="female"><label for="female">女</label></input>
        </p>
        <p>
            <label for="date">生日：</label>
            <input type="text" name="birthday" readonly="readonly" class="text" id="date"></input>
        </p>
    </form>
    <div id="loading">数据交互中...</div>
</body>
</html>
View Code

   采用对话框式：

$("#loading").dialog({
    autoOpen:false,
    modal:true,
    closeOnEscape:false, //按下Esc无效
    resizable:false,
    draggable:false,
    width:180,
    //height:80
    height:50  //height为何从80变为50，后面会讲解到
}).parent().find(".ui-widget-header").hide(); //去掉header头

   css增加部分：

#loading {
    background: url(img/loading.gif) no-repeat 20px center;
    line-height: 25px;
    font-size: 14px;
    font-weight: bold;
    text-indent: 40px; /* 首行缩进40像素  */
    color: #666;
}

   所以style.css为：

body {
    margin: 40px 0 0 0;
    padding: 0;
    font-size: 12px;
    font-family: 宋体;
    background: #fff;
}
/* 更改jQuery UI主题的对话框header的背景 */
.ui-widget-header {
    background: url(img/ui_header_bg.png);
}
/* 按钮正常状态的背景 */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background:url(img/ui_header_bg.png);
}
/* 按钮点击状态的背景 */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background:url(img/ui_white.png);
}
/* 工具提示的文本颜色 */
.ui-tooltip {
    color: #666;
}
/* 邮箱自动补全的悬停背景色 */
.ui-menu .ui-state-focus {
    background:url(img/ui_header_bg.png);
}
.ui-menu {
    color: #666;
}
/* 日历UI的今天单元格样式 */
.ui-datepicker-today .ui-state-highlight {
    border:1px solid #eee;
    color:#f60;
}
/* 日历UI的选定单元格样式 */
.ui-datepicker-current-day .ui-state-active {
    border:1px solid #eee;
    color:#06f;
}
.a {
    font-size: 30px;
}
#header {
    width: 100%;
    height: 40px;
    background: url(img/header_bg.png);
    position: absolute;
    top:0;
}
#header .header_main {
    width: 800px;
    height: 40px;
    margin: 0 auto;
}
#header .header_main h1 {
    font-size: 20px;
    margin: 0;
    padding: 0;
    color: #666;
    line-height: 40px;
    float: left;
    padding: 0 10px;
}
#header .header_search {
    padding: 6px 0 0 0;
    float: left;
}
#header .header_search .search {
    width: 300px;
    height: 24px;
    border: 1px solid #ccc;
    background: #fff;
    color: #666;
    font-size: 14px;
    text-indent: 5px;
}
#header .header_button {
    padding: 5px;
    float: left;
}
#header .header_member {
    float: right;
    line-height: 40px;
    color: #555;
    font-size: 14px;
}
#header .header_member a {
    text-decoration: none;
    font-size: 14px;
    color: #555;
}
#reg {
    padding: 15px 0 0 15px;
}
#reg p {
    margin: 10px 0;
    padding: 0;
}
#reg p label {
    font-size: 14px;
    color: #666;
}
#reg .star {
    font-size: 14px;
    color: maroon;  /* 红色太耀眼，换成棕色 */
}
#reg .succ {
    display: inline-block; /* 将<span>元素(内联)转变成内联块，而且<span>里还要有数据，插入的图片才能显示出来 */
    width: 28px;
    background: url(img/reg_succ.png) no-repeat;
}
#reg ol {
    margin:0;
    padding: 0 0 0 20px;
    color: maroon;
}
#reg ol li {
    height: 20px;
}
#reg .text {
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    width: 200px;
    height: 25px;
    line-height: 25px;
    text-indent: 5px;
    font-size: 13px;
    color: #666;
}

#loading {
    background: url(img/loading.gif) no-repeat 20px center;
    line-height: 25px;
    font-size: 14px;
    font-weight: bold;
    text-indent: 40px; /* 首行缩进40像素  */
    color: #666;
}
View Code

   三、Ajax提交

   最后，我们需要采用jquery.form.js插件对数据进行提交，而且在其他部分也需要做一些修改。

//输入验证成功之后，进行提交
submitHandler:function(form) {
    //alert("验证成功，准备提交中！");
    $(form).ajaxSubmit({
        url:"add.php",
        type:"post",
        beforeSubmit:function(formData,jqForm,options) {
            //提交之前，将“数据正在交互中...”对话框打开
            //打开之后，高度又默认增加了30，所以在初始化dialog时，height应-30，变为50
            $("#loading").dialog("open");

            //alert($("#reg").dialog("widget").html());
            //alert($("#reg").dialog("widget").find("button").eq(0).html()); //<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">Close</span>
            //alert($("#reg").dialog("widget").find("button").eq(1).html()); //<span class="ui-button-text">提交</span>
            $("#reg").dialog("widget").find("button").eq(1).button("disable"); //禁用提交按钮
        },
        success:function(responseText,statusText) {
            //alert(responseText); //新增成功，返回1
            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() { //一秒之后执行该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);
            }
        }
    });
}

   故，index.js为：

$(function() {
    $("#search_button").button({
        icons:{
            primary:"ui-icon-search",
        },
    });

    $("#loading").dialog({
        autoOpen:false,
        modal:true,
        closeOnEscape:false, //按下Esc无效
        resizable:false,
        draggable:false,
        width:180,
        //height:80
        height:50  //height为何从80变为50，后面会讲解到
    }).parent().find(".ui-widget-header").hide(); //去掉header头

    $("#reg_a").click(function() {
        $("#reg").dialog("open");
    });

    //$("#reg").dailog(...)返回的是jQuery对象，即对话框内容的div(id="reg")对象，所以可以连缀使用
    $("#reg").dialog({
        autoOpen:false,
        modal:true,
        resizable:false,
        width:320,
        height:340,
        buttons:{
            '提交':function() {
                $(this).submit();
            }
        }
    }).buttonset().validate({
        //输入验证成功之后，进行提交
        submitHandler:function(form) {
            //alert("验证成功，准备提交中！");
            $(form).ajaxSubmit({
                url:"add.php",
                type:"post",
                beforeSubmit:function(formData,jqForm,options) {
                    //提交之前，将“数据正在交互中...”对话框打开
                    //打开之后，高度又默认增加了30，所以在初始化dialog时，height应-30，变为50
                    $("#loading").dialog("open");

                    //alert($("#reg").dialog("widget").html());
                    //alert($("#reg").dialog("widget").find("button").eq(0).html()); //<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">Close</span>
                    //alert($("#reg").dialog("widget").find("button").eq(1).html()); //<span class="ui-button-text">提交</span>
                    $("#reg").dialog("widget").find("button").eq(1).button("disable"); //禁用提交按钮
                },
                success:function(responseText,statusText) {
                    //alert(responseText); //新增成功，返回1
                    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() { //一秒之后执行该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);
                    }
                }
            });
        },
        //错误提示出现，对话框高度增加，出现滚动条，所以应去除滚动条
        //每次激活错误，都会触发此属性
        showErrors:function(errorMap, errorList) {
            var errors = this.numberOfInvalids();
            if(errors > 0) {
                $("#reg").dialog("option","height",errors * 20 + 340);
            } else {
                $("#reg").dialog("option","height",340);
            }
            this.defaultShowErrors(); //执行默认错误
        },
        //高亮显示有错误的元素，变色式
        highlight:function(element,errorClass) {
            $(element).css("border","1px solid #630");
            $(element).parent().find("span").html("*").removeClass("succ");
        },
        //恢复默认
        unhighlight:function(element,errorClass) {
            $(element).css("border","1px solid #ccc");
            //element即为<input>控件
            //$(element).parent().find("span").html("ok");
            $(element).parent().find("span").html("&nbsp;").addClass("succ");
        },
        errorLabelContainer:"ol.reg_error",
        wrapper:"li",
        rules:{
            user:{
                required:true,
                minlength:2
            },
            pass:{
                required:true,
                minlength:6
            },
            email:{
                required:true,
                email:true
            },
            date:{
                date:true
            }
        },
        messages:{
            user:{
                required:"账号不得为空！",
                minlength:"账号不得小于{0}位！"
            },
            pass:{
                required:"密码不得为空！",
                minlength:"密码不得小于{0}位！"
            },
            email:{
                required:"邮箱不得为空！",
                email:"请输入正确的邮箱地址！"
            }
        }
    });

    $("#date").datepicker({
        changeMonth:true,
        changeYear:true,
        yearSuffix: ' ',
        maxDate:0, 
        yearRange:"1950:2020",
    });

    $("#email").autocomplete({
        delay:0,
        autoFocus:true,
        source:function(request,response) {
            var hosts = ['qq.com','163.com','126.com','sina.com.cn','gmail.com','hotmail.com'],
                term = request.term, //获取用户输入的内容
                name = term, //邮箱的用户名，如i_beautiful
                host = '', //邮箱的域名，如sina.com.cn
                ix = term.indexOf('@'), //@的位置
                result = []; //最终呈现的邮箱列表

            result.push(term);
            if(ix > -1) {
                name = term.slice(0, ix);
                host = term.slice(ix + 1);
            }
            if(name) {
                var findedHosts = (host ? $.grep(hosts, function(value, index) {
                        return value.indexOf(host) > -1; }) : hosts),
                    findedResult = $.map(findedHosts, function(value, index) {
                        return name + "@" + value; 
                    });
                result = result.concat(findedResult);
            }
            response(result);
        }
    });

});
View Code

 

转载于:https://www.cnblogs.com/yerenyuan/p/5467427.html

??yy
关注
谷歌浏览器插件—— Ajax Interceptor
03-16
Ajax Interceptor 是前端开发者工具箱中的一员，它与Chrome DevTools、Postman、Prettier、ESLint等工具一起，构建了强大的前端开发和调试生态系统。每个工具都有其独特的功能，共同服务于高效的前端工作流程。 ###...
使用Ajax方法实现Form表单的提交及注意事项
10-19
实现Ajax表单提交的代码示例： ```javascript function login(){ $.ajax({ type: "POST", // 指定请求类型，这里是POST请求 dataType: "json", // 指定服务器返回的数据类型 url: "/users/login", // 指定请求的...
前端经典——ajax前后数据交互.rar
11-29
POST请求将数据放在请求体中，适用于提交表单或大量数据。POST请求需要设置Content-Type头部，如"application/x-www-form-urlencoded"或"application/json"。 6. 错误处理：通过try...catch语句或onerror事件处理...
初探jquery——表单应用范例
10-31
### 初探jQuery——表单应用范例 #### 一、引言 随着Web开发技术的不断进步，jQuery作为一种轻量级的JavaScript库，在前端开发领域占据着举足轻重的地位。它简化了许多复杂的DOM操作，并提供了丰富的插件支持，...
ASP.NET源码——Ajax之用户注册实例.zip
10-10
这个"ASP.NET源码——Ajax之用户注册实例.zip"文件包含了一个具体的用户注册示例，它利用了Ajax技术来实现无刷新的交互体验。 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够...
前端 Flex 布局语法详解
最新发布
ning的博客
11-10 664
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
WPF+MVVM案例实战与特效（二十五）- 3D粒子波浪效果实现
lingshuangcanxue
11-05 382
使用WPF的3D控件以及动画效果实现3D粒子波浪的特效
基于 SpringBoot 实现QQ邮箱验证码注册功能
2301_79201049的博客
11-06 639
找到并开通以下的邮件协议服务，而且服务开启也较为简单，需要我们发送一个短信到指定的号码，开启后平台会提供一个授权码，一定要记住这个授权码，发邮件的时候需要这个。host 是根据服务主机区分，网易邮箱是 smtp.163.com, qq邮箱是 smtp.qq.com。其中的 username 是你第一步中操作的邮箱账号，nickname 是接收者收到邮件中显示的发件人。发送邮件的核心依赖是 mail ，由于该项目还涉及其他依赖就全都导进来了。（1）首先打开QQ邮箱，点击设置并来到账号页面。
Mybatis拦截器中获取@RequestBody表单的值修改查询SQL
十二的博客
11-06 426
Slf4j/*** 存储body数据的容器*/// 将body数据存储起来try {try {= null) {if (reader!
vue2 -- el-form组件动态增减表单项及表单项验证
King Saj
11-06 193
在数据录入场景（如订单信息录入）中，可根据实际情况（如商品种类增加）动态添加表单项（如商品相关信息）。包含必填项验证和数据格式验证（如邮箱、电话格式），防止错误数据提交。// 此处执行错误的逻辑。// 执行父组件回调。
ArkTS--应用状态
qq_63946637的博客
11-10 348
本文旨在帮助大家学习鸿蒙中的LocalStorage和AppStorage
第三十七章 Vue之编程式导航及跳转传参
Calvin的博客
11-10 1165
前面的章节我们学习了声明式导航的路由跳转，简单理解就是通过链接形式的路由跳转，本章节我们来学习下编程式导航跳转，即点击按钮来实现页面的跳转。在Vue中提供了两种实现方式。Home.vue的代码在前者基础上稍做调整即可，获取方式等代码一样。编程式导航两种跳转方式对于两种传参方式也都支持。跳转方法中通过name属性指定路由即可。2.1.1. 查询参数传参（简写）2.2. name命名路由跳转传参。1.2. name 命名路由跳转。2.1. path路径跳转传参。2.2.1. 查询参数传参。
vue种ref跟reactive的区别?
renqq001的博客
11-07 717
vue种ref跟reactive的区别?
深入剖析 Web HTTP 请求：从浏览器到服务器的完整流程
xiao_xiao_w的博客
11-10 583
从浏览器发出请求，到服务器经过反向代理、路由、处理业务逻辑后返回响应，再到浏览器解析渲染，
Webserver(5.1)五种IO模型
学习历程记录和分享
11-08 307
容易出现EAGAIN，就是时间还未发生，根据errno来决定。IO事件就绪，进程收到SIGIO信号，然后处理IO事件。在通知SIGIO阶段是异步的，可以去做自己的事情。调用某个函数，等待这个函数返回，期间什么也不做，不停地去检查这个函数有没有返回，必须等返回才能进行下一步动作。同步的话就是客户端主动一点去接收数据，异步的话就比较被动，等着对方通知你来接收数据。在处理IO的时候，阻塞与非阻塞都是同步IO，只有使用了特殊的API才是异步IO。同步就是recv去读取数据，异步是内核把buf准备好了会发信号通知。
前端md5加密
Xiang_Gong_Ya_的博客
11-07 240
md5Pwd（加密后的数据）
【Vue 全家桶】6、vue-router 路由（更新中）
椰子的职场成长记录
11-06 270
目录相关理解基本路由嵌套路由路由传参编程式路由导航 相关理解 基本路由 嵌套路由 路由传参 编程式路由导航
跨域及解决跨域
qq_38477936的博客
11-07 385
前端与后端不在同一个域名下：
VScode插件：前端每日一题
p_s_p的博客
11-06 345
VScode插件：前端每日一题 阐述您对函数式编程的见解及其利弊
J2EE中利用JSON+jQuery AJAX实现动态加载与异步表单提交
本文主要介绍了在J2EE（Java 2 Enterprise Edition）环境中利用JSON（JavaScript Object Notation）和jQuery以及AJAX技术来实现页面动态加载和表单内容的异步提交。J2EE项目通常采用Spring、Struts和iBatis等框架...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值