仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 846|回复: 8
打印 上一主题 下一主题

[学习教程] PHP编程:PHP jQuery Ajax提交与考证form表单详解...

[复制链接]
萌萌妈妈 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 22:15:04 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
用C语言重新编写,包括可以访问数据库。他将这些程序和一些表单直译器整合起来,称为PHP/FI。PHP/FI可以和数据库连接,产生简单的动态网页程序。PHPjQueryAjaxForm表单提交与考证实例剖析,包含创立一个表单html页面、增加JQuery代码、jqueryajax表单提交、jqueryajax表单考证、反应信息给用户。phpajax表单考证,phpajax提交表单,phpajaxform考证,phpajax提交form。本实例用到JQuery类库自己的函数和功效,一切表单信息使用PHPMailer类库邮件的情势发送。1、创立一个表单html页面表单部分html代码以下为援用内容:/****php100.com*2013-06-28***/<divid="contact_form"><formname="contact"method="post"action=""><fieldset><labelfor="name"id="name_label">姓名</label><inputtype="text"name="name"id="name"size="30"value=""class="text-input"/><labelclass="error"for="name"id="name_error">此项必填</label><labelfor="email"id="email_label">您的Email</label><inputtype="text"name="email"id="email"size="30"value=""class="text-input"/><labelclass="error"for="email"id="email_error">此项必填</label><labelfor="phone"id="phone_label">您的接洽德律风</label><inputtype="text"name="phone"id="phone"size="30"value=""class="text-input"/><labelclass="error"for="phone"id="phone_error">此项必填</label><br/><inputtype="submit"name="submit"class="button"id="submit_btn"value="我要发送"/></fieldset></form></div>这里用一个id为contact_form来包括全部包括信息;这是成心义的,稍后在JavaScript与用户交互信息的时分会用到,这里form标签的属性内里既包括了method和action;这个意义实在不年夜,由于Javascript间接操纵DOM,以是没有这两个属性也是能够的;务需要给用户输出的input标签加自力的id,这和第二点道理相似。不然,没法看到一般的效果。2、增加JQuery代码这里假定你已从JQuery官方网站高低载了JQuery基库,然后上传到了你的WEB服务器,并增加到你要利用的网页中。如今新建一个JS文件以下为援用内容:/****php100.com*2013-06-28***/$(function(){$(".button").click(function(){//处置表单考证和交给背景处置的逻辑});});第1行的function()函数与Jquery的document.ready函数用法和功效不异,都是在DOM筹办终了后主动触发。第2行内里是一个单击触发函数click(),必要注重的是,在HTML一页提交按钮上必要安排一个名为“button”的Class,以摹拟完成submit提交表单的功效,从第二点我们能够看出,JQuery能够很好的将布局和逻辑分别。3、jqueryajax表单考证在实践使用中,这一步是必不成少的。在用户漏填,错填某个项目时,实时提醒。以下为援用内容:/****php100.com*2013-06-28***/$(function(){$(.error).hide();$(".button").click(function(){//考证代码$(.error).hide();varname=$("input#name").val();if(name==""){$("label#name_error").show();$("input#name").focus();returnfalse;}varemail=$("input#email").val();if(email==""){$("label#email_error").show();$("input#email").focus();returnfalse;}varphone=$("input#phone").val();if(phone==""){$("label#phone_error").show();$("input#phone").focus();returnfalse;}});});第2行,我们增加一个$(.error).hide()是为了在用户未输出任何信息时埋没三个class="error"提醒毛病的label标签。而只要当呈现毛病,即为空时,毛病才会呈现,由于有returnfalse的感化,每次仅会呈现一个毛病。在JQuery内里,猎取DOM中某个ID大概Class的值以下为援用内容:/****php100.com*2013-06-28***///猎取id的值varname=$("input#name").val();//猎取class序号为1的值varname=$(".name")[1].val();现假定用户没有输出姓名,处置逻辑应当是:起首显现毛病,然后将核心定位在姓名上。以下为援用内容:/****php100.com*2013-06-28***/if(name==""){//用户名为空$("label#name_error").show();//毛病提醒$("input#name").focus();//核心定位returnfalse;//前往}在必填的字段上考证时,都必需returnfalse,不然会呈现必填项未填完即提交的情形。4、JqueryAjax提交表单这是完成无革新提交的中心步骤,经由过程ajax函数来递交javascript从DOM中猎取的表单项值,然后异步提交给背景处置程序process.php,并发送Email,此步紧接在考证程序以后:以下为援用内容:/****php100.com*2013-06-28***/vardataString=name=+name+&email=+email+&phone=+phone;//alert(dataString);returnfalse;$.ajax({type:"POST",url:"bin/process.php",data:dataString,success:function(){$(#contact_form).html("<divid=message></div>");$(#message).html("<h2>接洽体例已乐成提交!</h2>").append("<p>Scriptdesign</p>").hide().fadeIn(1500,function(){$(#message).append("");});}});returnfalse;中心函数是.ajax(),它所起得感化就是利用POST体例将已猎取的表单信息dataString异步传送给所界说的背景PHPurl(bin/process.php)。假如数据乐成传送,它会将一系列我们界说好的信息前往给用户。最初returnfalse,如许是为了避免页面从头加载。除前往乐成信息和发送邮件外,我们还能够做其他一些更普遍的事变。好比,将取得的数据交由背景剧本处置时,将数据拔出数据库中,然后再将用户提交的信息前往,由于:起首,猎取表单项的值:以下为援用内容:/****php100.com*2013-06-28***/varname=$("input#name").val();varemail=$("input#email").val();varphone=$("input#phone").val();//将表单项的值组分解一个字符串vardataString=name=+name+&email=+email+&phone=+phone;将此组合字符串的值经由过程AJAX函数传送给背景url,假如乐成,则会前往乐成信息给用户:以下为援用内容:/****php100.com*2013-06-28***/$.ajax({type:"POST",url:"bin/process.php",data:dataString,success:function(){$(#contact_form).html("<divid=message></div>");$(#message).html("<h2>ContactFormSubmitted!</h2>").append("<p>Wewillbeintouchsoon.</p>").hide().fadeIn(1500,function(){$(#message).append("");});}});returnfalse;5、反应信息给用户起首,在信息提交乐成以后,JQuery会经由过程以下部分静态的交换失落<divid="contact_form"></div>中的内容:以下为援用内容:/****php100.com*2013-06-28***/$(#contact_form).html("<divid=message></div>");以是请人人记着,假如你今后必要经由过程JavaScript静态的交换失落某个层大概span,可使用Jquery的.html办法完成。其次,有了这个层一定还不敷,由于内里还没有内容,以是,我们还要给id=message的这个层增加一些显现内容:以下为援用内容:/****php100.com*2013-06-28***/$(#message).html("<h2>接洽体例已乐成提交!</h2>")一样是静态的为id为message的层增加了一段html用于提醒。还能够使用append办法在message层中追加一句:以下为援用内容:/****php100.com*2013-06-28***/.append("<p>Wewillbeintouchsoon.</p>")最初为了体现出提交以后,服务器处置的静态效果,我们设置了以下殊效代码:以下为援用内容:/****php100.com*2013-06-28***/.hide()//全部层消散.fadeIn(1500,function(){//在1500毫秒内渐渐呈现//最初再静态追加一个乐成图标$(#message).append("");});会MYSQL吗?会,我会把我的信息在数据库里插入删除啦
深爱那片海 该用户已被删除
沙发
发表于 2015-1-18 12:56:13 | 只看该作者
有位前辈曾经跟我说过,phper至少要掌握200个函数编起程序来才能顺畅点,那些不熟悉的函数记不住也要一拿手册就能找到。所以建议新手们没事就看看php的手册(至少array函数和string函数是要记牢的)。
萌萌妈妈 该用户已被删除
板凳
 楼主| 发表于 2015-1-22 05:40:56 | 只看该作者
学习php的目的往往是为了开发动态网站,phper就业的要求也涵盖了很多。我大致总结为:精通php和mysql
乐观 该用户已被删除
地板
发表于 2015-1-30 23:14:10 | 只看该作者
小鸟是第一次发帖(我习惯潜水的(*^__^*) 嘻嘻……),有错误之处还请大家批评指正,另外,前些日子听人说有高手能用php写驱动程序,真是学无止境,人外有人,天外有天。
若天明 该用户已被删除
5#
发表于 2015-2-6 16:45:37 | 只看该作者
Ps:以上纯属原创,如有雷同,纯属巧合
飘灵儿 该用户已被删除
6#
发表于 2015-2-17 09:50:23 | 只看该作者
环境搭建好,当你看见你的浏览器输出“it works\\\\\\\"时你一定是喜悦的。在你解决问题的时候,我强烈建议多读php手册。
小妖女 该用户已被删除
7#
发表于 2015-3-5 19:22:08 | 只看该作者
首先我是坚决反对新手上来就用框架的,因为对底层的东西一点都不了解,造成知识上的真空,会对以后的发展不利。我的观点上手了解下框架就好,代码还是手写。当然啦如果是位别的编程语言的高手的话,这个就另当别论啦。
冷月葬花魂 该用户已被删除
8#
发表于 2015-3-12 12:10:55 | 只看该作者
作为一个合格的coder 编码的规范是必须,命名方面我推崇“驼峰法”,另外就是自己写的代码最好要带注释,不然时间长了,就算是自己的代码估计看起来都费事,更不用说别人拉。
只想知道 该用户已被删除
9#
发表于 2015-3-19 22:15:39 | 只看该作者
要进行开发,搭建环境是首先需要做的事,windows下面我习惯把环境那个安装在C盘下面,因为我配的环境经常出现诡异事件,什么事都没做环境有的时候就不能用啦。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 02:11

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表