当前位置:
文档之家› PHP jQuery Ajax 提交表单form详解
PHP jQuery Ajax 提交表单form详解
PHP jQuery Ajax Form 表单提交实例解析,包括创建一个表单 html 页面、添加 JQuery 代码、 jquery ajax 表单提交、 jquery ajax 表单验证、 反馈信息给用户, php ajax 表单验证,php ajax 提交表单,php ajax form 验证,php ajax 提交 form 。 本实例用到 JQuery 类库本身的函数和功能, 所有表单信息利用 PHPMailer 类库邮 件的形式发送。 1、创建一个表单 html 页面 表单部分 html 代码
以下为引用内容:
这里用一个 id 为 contact_form 来包含整个包含信息;这是有意义的,稍后在 JavaScript 与用户交互信息的时候会用到,这里 form 标签的属性里面既包含了 method 和 action ;这个意义其实不大,因为 Javascript 直接操作 DOM ,所以没有 这两个属性也是可以的;务必要给用户输入的 input 标签加独立的 id ,这和第二点原理 类似。否则,无法看到正常的效果。 2、添加 JQuery 代码 这里假设你已经从 JQuery 官方网站上下载了 JQuery 基库,然后上传到了你的 WEB 服务器,并添加到你要使用的网页中。
现在新建一个 JS 文件
以下为引用内容: $(function() { $(".button").click(function() { // 处理表单验证和交给后台处理的逻辑 }); });
第 1 行的 function() 函数与 Jquery 的 document.ready 函数用法和功能相同, 都是在 DOM 准备完毕后自动触发。第 2 行里面是一个单击触发函数 click() ,需要注意 的是, HTML 一页提交按钮上需要放置一个名为“button”的 Class , 在 以模拟实现 submit 提交表单的功能,从第二点我们可以看出,JQuery 可以很好的将结构和逻辑分离。 3、jquery ajax 表单验证 在实际应用中,这一步是必不可少的。在用户漏填,错填某个项目时,及时提示。
以下为引用内容: $(function() { $('.error').hide(); $(".button").click(function() { // 验证代码 $('.error').hide(); var name = $("input#name").val(); if (name == "") { $("label#name_error").show(); $("input#name").focus(); return false; } var email = $("input#email").val(); if (email == "") { $("label#email_error").show(); $("input#email").focus(); return false; } var phone = $("input#phone").val(); if (phone == "") { $("label#phone_error").show(); $("input#phone").focus(); return false; } }); });
第 2 行, 我们添加一个 $('.error').hide() 是为了在用户未输入任何信息时隐藏三个 class="error" 提示错误的 label 标签。而只有当出现错误,即为空时,错误才会出现, 因为有 return false 的作用,每次仅会出现一个错误。 在 JQuery 里面,获取 DOM 中某个 ID 或者 Class 的值
以下为引用内容: //获取 id 的值 var name = $("input#name").val(); //获取 class 序号为 1 的值 var name = $(".name")[1].val();
现假设用户没有输入姓名,处理逻辑应该是:首先显示错误,然后将焦点定位在姓名 上。
以下为引用内容: if (name == "") { //用户名为空 $("label#name_error").show(); //错误提示 $("input#name").focus(); //焦点定位 return false; //返回 }
在必填的字段上验证时,都必须 return false ,否则会出现必填项未填完即提交的 情况。 4、Jquery Ajax 提交表单 这是实现无刷新提交的核心步骤,通过 ajax 函数来递交 javascript 从 DOM 中获 取的表单项值,然后异步提交给后台处理程序 process.php ,并发送 Email ,此步紧接 在验证程序之后:
以下为引用内容: var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; //alert (dataString);return false; $.ajax({ type: "POST", url: "bin/process.php", data: dataString, success: function() { $('#contact_form').html("
"); $('#message').html("
联系方式已成功提交!
") .append("
Script design
") .hide() .fadeIn(1500, function() {
$('#message').append(""); }); } }); return false;
核心函数是 .ajax() ,它所起得作用就是使用 POST 方式将已经获取的表单信息 dataString 异步传送给所定义的后台 PHP url(bin/process.php) 。如果数据成功传送, 它会将一系列我们定义好的信息返回给用户。最后 return false ,这样是为了防止页面重 新加载。 除了返回成功信息和发送邮件外,我们还可以做其他一些更广泛的事情。比如,将获 得的数据交由后台脚本处理时, 将数据插入数据库中, 然后再将用户提交的信息返回, 因为: 首先,获取表单项的值:
以下为引用内容: var name = $("input#name").val(); var email = $("input#email").val(); var phone = $("input#phone").val(); //将表单项的值组合成一个字符串 var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
将此组合字符串的值通过 AJAX 函数传递给后台 url ,如果成功,则会返回成功信息 给用户:
以下为引用内容: $.ajax({ type: "POST", url: "bin/process.php", data: dataString, success: function() { $('#contact_form').html("
"); $('#message').html("
Contact Form Submitted!
") .append("
We will be in touch soon.
") .hide() .fadeIn(1500, function() { $('#message').append("
"); }); } }); return false;
5、反馈信息给用户
首先,在信息提交成功之后,JQuery 会通过以下部分动态的替换掉
中的内容:
以下为引用内容: $('#contact_form').html("
");
所以请大家记住, 如果你以后需要通过 JavaScript 动态的替换掉某个层或者 span , 可以使用 Jquery 的 .html 方法实现。其次,有了这个层肯定还不够,因为里面还没有内 容,所以,我们还要给 id=message 的这个层添加一些显示内容:
以下为引用内容: $('#message').html("
联系方式已成功提交!
")
同样是动态的为 id 为 message 的层添加了一段 html 用于提示。还可以利用 append 方法在 message 层中追加一句:
以下为引用内容: .append("
We will be in touch soon.
")
最后为了表现出提交之后,服务器处理的动态效果,我们设置了以下特效代码:
以下为引用内容: .hide() //整个层消失 .fadeIn(1500, function() {//在 1500 毫秒内逐渐出现 //最后再动态追加一个成功图标 $('#message').append("
"); });
表单_基础知识
表单 表单form是Internet和服务器之间进行信息交流的一种重要工具。包括按钮、文本框、单选按钮、复选按钮等,它们被称之为表单对象。表单的使用包括两部分:一是用户界面,提供用户输入数据的元件;另一部分是处理程序,可以是客户端程序而在浏览器执行,也可以是服务器程序,处理用户提交的数据,返回结果。 一.可插入的表单对象 Dreamweaver中,在“插入”面板中,有一个“表单”分类,选择该分类,可插入的表单对象快捷按钮就会出现。如下图: 可插入的对象,从左至右,包括: ?表单 ?文本字段 ?隐藏域 ?文本区域 ?复选框 ?单选按钮 ?单选按钮组 ?列表/菜单 ?跳转菜单 ?图像域 ?文件域 ?按钮 1.插入表单域 要在网页中插入表单对象,首先应该插入一个表单域,否则服务器将无法处理用户填写的信息。操作步骤如下: 步骤1:“插入”面板中,选择“表单”分类,单击左边第1个“表单”按钮,随即插入到网页中一个表单域,表单域在设计视图中显示为一个红色虚线框的范围。如图所示: 如果没有红色虚线框,执行菜单栏“查看/可视化助理/不可见元素”命令即可。 步骤2:设置表单域属性。使用鼠标单击虚线的边框,此时虚线框内出现黑色区域,表示该表单域被选中,属性面板如下: 表单域属性面板包括:
?表单名称:标识表单的唯一名称。 ?动作:指定处理该表单的动态页或脚本的路径。可以键入完整的路径,也可以单击“浏览文件”按钮指定到同一站点中包含该脚本或应用程序页的相应文件夹。如果没有相关程序支持的话,也可以使用E-mail的方式来传输表单信息,这种方式在动作文本框中键入:“mailto:电子邮件地址”。表示提交的信息将会发送到作者的邮箱中。比如 ?方法:用于选择表单数据传输到服务器的方法。可选择速度快但携带数据量小的GET方法,或者数据量大的POST方法。一般使用POST方法。 ?目标:指定打开窗口的方式。 ?MIME类型:指定对提交给服务器进行处理的数据使用MIME编码类型。 ?类:定义好的CSS样式。 2.插入文本域 当浏览者浏览网页需要输入文字资料时,像姓名、地址、E-mail或稍长一些的个人介绍等栏目,在制作时就可以使用文本域,它在浏览器中将显示为一个文本框。 具体操作如下: 步骤1:插入文本域前请确定首先插入了一个表单域,并且将光标放入表单域中。如果在表单域外插入文本域,Dreamweaver会弹出提示框,是否创建一个表单域。 步骤2:在“插入”面板中,选择“表单”分类,单击左边第2个“文本字段”按钮,随即插入到网页中一个文本域。可以在文本域前加入说明的文字,如“用户名”,告知浏览者需要填入的内容的类型。 步骤3:单击文本域,对文本域的属性面板进行设置: 文本域:输入文本字段的名称,该名称在该网页中是唯一的名称。名称不能包含空格或 特殊字符,可以使用字母数字字符和下划线的任意组合。 字符宽度:设置文本域中最多可显示的字符数。 最多字符数:设置单行文本域中所能输入的最多字符数。如果是空白,则可以输入任意 数量的文本。(最好对不同内容的文本域进行不同数量的限制,防止个别浏览者恶意输入大量数据,维护系统的稳定性。) 初始值:输入文本域中默认状态时显示的内容,当浏览者键入资料时初始文本被替代。 类型:显示了当前文本域的类型,包括“单行”、“多行”和“密码”。其中, ---单行是默认选项,只显示一行文本。 ---多行表示插入的文本可显示多行(如图)。
PHP JQUERY AJAX 提交表单FORM详解
PHP jQuery Ajax Form表单提交实例解析,包括创建一个表单html页面、添加JQuery代码、jquery ajax表单提交、jquery ajax表单验证、反馈信息给用户,php ajax 表单验证,php ajax提交表单,php ajax form验证,php ajax提交form。 本实例用到JQuery类库本身的函数和功能,所有表单信息利用PHPMailer类库邮件的形式发送。 1、创建一个表单html页面 表单部分html代码 这里用一个id为contact_form来包含整个包含信息;这是有意义的,稍后在JavaScript与用户交互信息的时候会用到,这里form标签的属性里面既包含了method和action;这个意义其实不大,因为Javascript直接操作DOM,所以没有这两个属性也是可以的;务必要给用户输入的input标签加独立的id,这和第二点原理类似。否则,无法看到正常的效果。 2、添加JQuery代码 这里假设你已经从JQuery官方网站上下载了JQuery基库,然后上传到了你的WEB服务器,并添加到你要使用的网页中。
现在新建一个JS文件 第1行的function()函数与Jquery的document.ready函数用法和功能相同,都是在DOM准备完毕后自动触发。第2行里面是一个单击触发函数click(),需要注意的是,在HTML一页提交按钮上需要放置一个名为“button”的Class,以模拟实现submit 提交表单的功能,从第二点我们可以看出,JQuery可以很好的将结构和逻辑分离。 3、jquery ajax表单验证 在实际应用中,这一步是必不可少的。在用户漏填,错填某个项目时,及时提示。
表单作业
实验3.8 表单的应用 【相关知识】 1. 表单是用于申请或提交某些信息而填写的交互网页,属于网页动态元素。它是网站 管理者与浏览者之间沟通的桥梁。 2. 表单域是具有相互联系的、能够完成一定功能的表单对象的集合。一个网页中可有 多个表单域。 3. 表单对象指表单域中专门处理用户输入数据的元素。表单对象一般都添加在表单域 中。网页中的表单对象包括文本域、单选按钮、复选框、下拉列表、按钮等。 4. 表单不能嵌套,但是一个网页中可以有多个表单。 5. 提交表单的方法有两种:POST和GET。POST方法将在HTTP请求中嵌入表单数据, 通常用来传送大量数据。GET方法将表单数据附加在请求页面的URL地址后面,通常用来传送少量数据。 一、实验目的和要求 掌握使用表单设计新用户注册页面的方法。页面的设计效果如图3-8所示。 图3-8 “新用户注册”页面的效果图
二、实验步骤 1. 新建一个网页文档 启动Dreamweaver。单击【文件】→【新建】菜单命令,新建一个网页文档。 2. 插入表单域 (1)将光标放在网页上要插入表单域的位置。 (2)单击【插入】→【表单】→【表单】菜单命令,或者打开【表单插入栏】,单击上面的【表单】按钮。在网页中插入表单域。 3. 插入表格 (1)将光标放在表单域中,单击【文件】→【表格】菜单命令,打开【表格】对话框。 (2)在对话框中,设置【行数】为“13”;设置【列数】为“2”;设置【表格宽度】为“600像素”;单击【确定】按钮。插入一个13行2列的表格。 (3)选中该表格。在属性面板的【对齐】下拉列表中选择“居中对齐”。 4. 添加表单对象 (1)将光标放在第1行第1列的单元格中。单击【插入】→【表单】→【文本域】菜单命令,或者单击【表单插入栏】上面的【文本字段】按钮,插入一个文本域。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“会员号”。选中该文本域,在属性面板中,设置【字符宽度】为“20”;设置【最多字符数】为“20”;在【类型】处选择“单行”。将光标放在第1行第2列的单元格中,输入文字“(必填)”。 (2)将光标放在第2行第1列的单元格中。单击【插入】→【表单】→【文本域】菜单命令,或者单击【表单插入栏】上面的【文本字段】按钮,插入一个文本域。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“密码”。选中该文本域,在属性面板的【类型】处选择“密码”;设置【字符宽度】为“10”;设置【最多字符数】为“10”。将光标放在第2行第2列的单元格中,输入文字“(必填)”。 (3)将光标放在第3行第1列的单元格中。输入文字“性别”。单击【插入】→【表单】→【单选按钮】菜单命令,或者单击【表单插入栏】上面的【单选按钮】按钮,插入一个单选按钮。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“男”。 用同样的方法插入另一个单选按钮。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“女”。 (4)将光标放在第4行第1列的单元格中。单击【插入】→【表单】→【列表/菜单】菜单命令,或者单击【表单插入栏】上面的【列表/菜单】按钮,插入一个列表/菜单。 在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“常住地点”。选中该列表/菜单对象,在属性面板的【类型】处选择“列表”;设置【高度】为“2”;选中【允许多选】复选项。单击【列表值】按钮,打开【列表值】对话框。单击按钮,输入如表3-3所示的“常住地点”列表值数据。 表3-3 “常住地点”列表值数据 项目标签值 北京 1 上海 2 天津 3 广东 4
第八章 表单
第八章表单 表单是网页中提供的一种交互式操作手段,在网页中的使用十分广泛。无论是提交搜索的信息,还是网上注册等都需要使用表单。用户可以通过提交表单信息与服务器进行动态交流。表单主要可以分为两部分:一是用HTML源代码描述的表单,可以直接通过插入的方式添加到网页中;二是提交后的表单处理,需要调用服务器端编写好的脚本对客户端提交的信息作出回应。 1 表单的概念 表单通常用来做调查表、注册登录界面、搜索界面等。通过表单收集到的用户反馈信息,通常是以某种分隔符分隔的文字形式提交到服务器。 表单使用的
之间的部分就是一个表单。 表单form基本语法:
?name:给定表单名称,表单命名之后就可以用脚本语言(如JavaScript 或VBScript)对它进行控制。 ?action:指定处理表单信息的服务器端应用程序。 ?method:用于指定表单向服务器提交数据的方法,method的值可以为get或是post,默认方式是get。 (1)get方法,使用get方法提交数据,浏览器将把表单中的各个值添加 到action指定的URL后(这两者之间用问号进行分隔)并向服务器发 送get请求,每个值之间用符号“&”链接。 (2)post方法,如果采用post方法,浏览器将首先与action属性中指定 的表单处理程序建立联系,一旦建立连接之后,浏览器就会按分段 传输的方法将数据发送给服务器。 (3)get将表单中的数据按照“变量=值”的形式,添加到action所指向 的URL后面,并且两者使用“?”连接,而各个变量之间使用“&” 连接;post是将表单中的数据放在表单的数据体中,按照变量和值相 对应的方式,传递到action所指向的URL。 (4)get是不安全的,post的所有操作对用户来说都是不可见的。 (5)post可以传输大量的数据,所以在上传文件时只能使用post。 (6)get是表单的默认方法。 2 输入
是个单标记,它必须嵌套在表单标记中使用,用于定义一个用户的输入项。 格式:
第一节 HTML表单提交数据和JSP获得数据
第一节 HTML表单提交数据和JSP获得数据 为了学习掌握JSP动态网页的设计开发,我们先从大家比较熟悉的表单入手。以前在学习静态网页设计时,做好的表单无法提交数据,那是因为没有接收数据的程序。本节使用一组范例,由HTML的表单提交数据,并使用JSP动态网页获得数据,来说明他们之间的关系和工作原理。 一、范例的演示和代码清单 演示的前提: 1.配置好开发运行环境; 2.将随书光盘中的范例ch2,复制到resin2.1.6\doc文件夹内; 3.启动JSP引擎; 演示步骤: 1.启动IE,在地址栏键入http://127.0.0.1:8080/ch2/ch2-1.htm,如图2-1所示: 图2-1 2.在表单的姓名栏键入“张三”,年龄栏键入“21”,性别选择其中的一项,密码栏 键入“123”,然后点击“提交”按钮。屏幕出现2-2所示界面:
图2-2 注意:访问动态网页必须在启动JSP引擎后,在IE的地址栏键入IP地址和路径文件名,才能进行访问,不能使用直接双击打开的方式。 网页的页面上显示了所提交数据的全部内容。请注意,地址栏上的内容是:http://127.0.0.1:8080/ch2/ch2-1.jsp。这说明提交的数据已被ch2-1.jsp动态网页接收,并将其送到屏幕上进行显示。 当然,可以在表单中填写其他的内容,屏幕显示的内容会随之变化。但是如果在“年龄”项目中填写的不是数字,而是字母、汉字等不正确的内容,屏幕上也会将这些错误内容显示出来,甚至任何一项都不填写,直接点击“提交”按钮,动态网页仍能正常运行。这些问题,我们会在以后的章节中去一一解决。目前先要弄清HTML静态网页和JSP动态网页之间的关系。 两个网页的代码如下: 范例ch2-1.htm 1) 2)
3)
4)
表单 5) 6) 7) 8)
使用表单提交数据
9)
HTML 表单(Form)常用控件(Controls)
HTML 表单(Form)常用控件有:
? ? ? ? ? ? ?
input type="text" 单行文本输入框 input type="submit" 将表单(Form)里的信息提交给表单里 action 所指向的文件 input type="checkbox" 复选框 input type="radio" 单选框 select 下拉框 textArea 多行文本输入框 input type="password" 密码输入框(输入的文字用*表示)
表单控件(Form Control):单行文本输入框(input type="text")
单行文本输入框允许用户输入一些简短的单行信息,比如用户姓名。例句如下:
表单控件(Form Control):复选框(input type="checkbox")
复选框允许用户在一组选项里,选择多个。示例代码:
苹果
桔子
芒果
用 checked 表示缺省已选的选项。
桔子
表单控件(Form Control):单选框(input type="radio")
使用单选框,让用户在一组选项里只能选择一个。示例代码:
苹果
桔子
芒果
用 checked 表示缺省已选的选项。
表单multipart(form-data)
Java中,当表单含有文件上传时,提交数据的如何读取 当提交表单里包含文件上传的时候,即Form的enctype属性值为multipart/form-data时,后台是无法像普通表单那样通过request.getParameter来获取用户提交的数据的。(说实话,我经常因为忘记这个问题而浪费好多调查时间。) 1.// 判断enctype属性是否为multipart/form-data 2.boolean isMultipart = ServletFileUpload.isMultipartContent(request); 3. 4.// Create a factory for disk-based file items 5.DiskFileItemFactory factory = new DiskFileItemFactory();
7.// 当上传文件太大时,因为虚拟机能使用的内存是有限的,所以此时要通过临时文件来实现 上传文件的保存 8.// 此方法是设置是否使用临时文件的临界值(单位:字节) 9.factory.setSizeThreshold(yourMaxMemorySize); 10. 11.// 与上一个结合使用,设置临时文件的路径(绝对路径) 12.factory.setRepository(yourTempDirectory); 13. 14.// Create a new file upload handler 15.ServletFileUpload upload = new ServletFileUpload(factory); 16. 17.// 设置上传内容的大小限制(单位:字节) 18.upload.setSizeMax(yourMaxRequestSize); 19. 20.// Parse the request 21.List> items = upload.parseRequest(request); 22. 23.Iterator iter = items.iterator(); 24.while (iter.hasNext()) { 25.FileItem item = (FileItem) iter.next(); 26. 27.if (item.isFormField()) { 28.//如果是普通表单字段 29.String name = item.getFieldName(); 30.String value = item.getString(); 31.... 32.} else { 33.//如果是文件字段 34.String fieldName = item.getFieldName(); 35.String fileName = item.getName(); 36.String contentType = item.getContentType(); 37.boolean isInMemory = item.isInMemory(); 38.long sizeInBytes = item.getSize(); 39....
jsp表单提交到后台
jsp表单处理 [html]view plain copy 1.