当前位置:文档之家› PHP jQuery Ajax 提交表单form详解

PHP jQuery Ajax 提交表单form详解

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)
10)  11)姓名: 12) 13)

HTML FORM表单,input标签的说明

HTML 表单(Form)是 HTML 的一个重要部分,主要用于采集和提交用户输入的信息。
一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮:
First name: Last name:




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.

2.
3. 4. 5. 6. 7. 8.
人员信息录入
9. 10. 11. 16. 17. 18.
12. 13. 14. 15.

19.

20.人员信息 21. 22. 23. 24. 27. 28. 31. 32. 33. 36. 37.
用户名: 25. 26.*
登陆密码:
29. 30.*
性别: 34. 男 35.
出生日期:

禁止表单多次提交

禁止表单多次提交 <!--此特效来源来互联网,由https://www.doczj.com/doc/e15689692.html, 收集整理--> <!--禁止表单多次提交--> <h4>禁止表单多次提交,表单提交一次后提交键变灰色</h4> <script> function submitonce(theform){ //if IE 4+ or NS 6+ if (document.all||document.getElementById){ //screen thru every element in the form, and hunt down "submit" and "reset" for (i=0;i<theform.length;i++){ var tempobj=theform.elements[i] if(tempobj.type.toLowerCase()=="submit"||tempobj.type.to LowerCase()=="reset") //disable em tempobj.disabled=true } } } </script>

<form method="POST" onSubmit="submitonce(this)"> <input type=input name="asdf"> <input type=submit name="OK"> </form>     1. 利用javascript : 1.1 document.form1.submit();后加 document.body.innerHtml = "<center> Waiting...</center>"; //当然这里的html代码就由你发挥了,还可把这段写成函数,这样维护就方便了!这一处理,就让用户在等待提交时不会误以为没提交而重复按提交按钮! 1.2 按钮设置 <SCRIPT LANGUAGE="JavaScript"> function changesubmit() { document.aa.B1.disabled = "true"; } </script> …… <form method="POST" action="aa.jsp" name="aa"

form表单提交数据编码方式和tomcat接受数据解码方式的思考

做java的web开发有段日子了,有个问题老是困扰着我,就是乱码问题,基本上是网上查找解决方案(网上资料真的很多),都是一大堆的介绍如何解决此类的乱码问题,但是没几个把问题的来龙去脉说清楚的,有时候看了些文章后,以为自己懂了,但是在开发中乱码问题又像鬼魂一样出来吓人,真是头大了!这篇文章是我长时间和乱码做斗争的一些理解的积累,还希望有更多的朋友给出指点和补充。 form有2中方法把数据提交给服务器,get和post,分别说下吧。 (一)get提交 1.首先说下客户端(浏览器)的form表单用get方法是如何将数据编码后提交给服务器端的吧。 对于get方法来说,都是把数据串联在请求的url后面作为参数,如:http://localhost:8080/servlet?msg=abc (很常见的一个乱码问题就要出现了,如果url中出现中文或其它特殊字符的话,如:http://localhost:8080/servlet?msg=杭州,服务器端容易得到乱码),url拼接完成后,浏览器会对url进行URL encode,然后发送给服务器,URL encode 的过程就是把部分url做为字符,按照某种编码方式(如:utf-8,gbk等)编码成二进制的字节码,然后每个字节用一个包含3个字符的字符串 "%xy" 表示,其中xy为该字节的两位十六进制表示形式。我这里说的可能不清楚,具体介绍可以看下https://www.doczj.com/doc/e15689692.html,.URLEncoder类的介绍在这里。了解了URL encode的过程,我们能看到2个很重要的问题,第一:需要URL encode的字符一般都是非ASCII 的字符(笼统的讲),再通俗的讲就是除了英文字母以外的文字(如:中文,日文等)都要进行URL encode,所以对于我们来说,都是英文字母的url不会出现服务器得到乱码问题,出现乱码都是url里面带了中文或特殊字符造成的;第二:URL encode到底按照那种编码方式对字符编码?这里就是浏览器的事情了,而且不同的浏览器有不同的做法,中文版的浏览器一般会默认的使用GBK,通过设置浏览器也可以使用UTF-8,可能不同的用户就有不同的浏览器设置,也就造成不同的编码方式,所以很多网站的做法都是先把url里面的中文或特殊字符用javascript做URL encode,然后再拼接url提交数据,也就是替浏览器做了URL encode,好处就是网站可以统一get方法提交数据的编码方式。完成了URL encode,那么现在的url就成了ASCII范围内的字符了,然后以iso-8859-1的编码方式转换成二进制随着请求头一起发送出去。这里想多说几句的是,对于get方法来说,没有请求实体,含有数据的url都在请求头里面,之所以用URL encode,我个人觉的原因是:对于请求头来说最终都是要用iso-8859-1编码方式编码成二进制的101010.....的纯数据在互联网上传送,如果直接将含有中文等特殊字符做iso-8859-1编码会丢失信息,所以先做URL encode是有必要的。 2。服务器端(tomcat)是如何将数据获取到进行解码的。 第一步是先把数据用iso-8859-1进行解码,对于get方法来说,tomcat获取数据的是ASCII范围内的请求头字符,其中的请求url里面带有参数数据,如果参数中有中文等特殊字符,那么目前还是URL encode后的%XY状态,先停下,我们先说下开发人员一般获取数据的过程。通常大家都是 request.getParameter("name")获取参数数据,我们在request对象或得的数据都是经过解码过的,而解码过程中程序里是无法指定,这里要说下,有很多新手说用request.setCharacterEncoding("字符集")可以指定解码方式,其实是不可以的,看servlet的官方API说明有对此方法的解释:Overrides the name of

HTML表单

HTML表单 一、表单 1.表单的作用 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。 2.表单的工作机制 3.表单定义(标签) HTML表单是一个包含表单元素的区域,表单使用

标签创建。表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。注意,元素是块级元素,其前后会产生折行。 1 2 3
3.表单属性 action:规定当提交表单时,向何处发送表单数据。action取值为:第一,一个URL(绝对URL/相对URL),一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理。比如

action="https://www.doczj.com/doc/e15689692.html,/login.do">,当用户提交这个表单时,服务器将执行网址"https://www.doczj.com/doc/e15689692.html,/"上的名为"login.do"的一般处理程序。第二,使用mailto协议的URL地址,这样会将表单内容以电子邮件的形式发送出去。这种情况比较少见的,因为它要求访问者的计算机上安装和正确设置好了邮件发送程序。第三,空值,如果action为空或不写,表示提交给当前页面。 method:该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。关于method的取值,最常用的是get和post。第一,使用get方式提交表单数据,Web浏览器会将各表单字段元素及其数据按照URL参数格式附在

标签的action属性所指定的URL地址后面发送给Web服务器;由于URL的长度限制,使用get方式传送的数据量一般限制在1KB以下。第二,使用post方式,浏览器会将表单数据作为HTTP请求体的一部分发送给服务器。一般来说,使用post方式传送的数据量要比get方式传递的数据量大;根据HTML标准,如果处理表单的服务器程序不会改变服务器上存储的数据,则应采用get方式(比如查询),如果表单处理的结果会引起服务器上存储的数据的变化,则应该采用post方式(比如增删改操作)。第三,其它方式(Head、PUT、DELETE、TRACE 或OPTIONS等)。其实,最初HTTP标准对各种操作都规定了相应的method,但后来很多都没有被遵守,大部分情况只是使用get或post就OK。 target:该属性规定在何处显示action属性中指定的URL所返回的结果。取值有_blank(在新窗口中打开)、_self(在相同的框架中打开,默认值)、_parent(在父框架中打开)、_top(在整个窗口中打开)和framename(在指定的框架中打开)。 title:设置网站访问者的鼠标放在表单上的任意位置停留时,浏览器用小浮标显示的文本。 enctype:规定在发送到服务器之前应该如何对表单数据进行编码。取值:默认值为 "application/x-www-form-urlencoded",在发送到服务器之前,所有字符都会进行编码(空格转换为"+" 加号,特殊符号转换为ASCII HEX 值);“multipart/form-data”:不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。 name:表单的名称。注意和id属性的区别:name属性是和服务器通信时使用的名称;而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和javascript中使用的。 二、表单元素 1.单行文本框(input 的type 属性的默认值就是"text") 以下是单行文本框的主要属性: size:指定文本框的宽度,以字符个数为单位;在大多数浏览器中,文本框的缺省宽度是20个字符。 value:指定文本框的默认值,是在浏览器第一次显示表单或者用户单击按钮之后在文本框中显示的值。 maxlength:指定用户输入的最大字符长度。 readonly:只读属性,当设置readonly属性后,文本框可以获得焦点,但用户不能改变文本框中的value。 disabled:禁用,当文本框被禁用时,不能获得焦点,当然,用户也不能改变文本框的值。并且在提交表单时,浏览器不会将该文本框的值发送给服务器。 2.密码框 3.单选按钮

VF 表单程序题(含答案)

1、利用文本框和标签控件设计了一表单F1.SCX,文本框Text1的V alid事件代码及表单界面如图1所示。向Text1中输入一段字符:”Figure 1-18 shows you how to use a MENU.”(不含双引号)[Text1.Valid event] x=alltrim(thisform.text1.value) y=len(x) store 0 to z1,z2 for i=1 to y a=substr(x,i,1) do case case asc(a)>=65 and asc(a)<=90 z1=z1+1 case asc(a)>=97 and asc(a)<=122 z2=z2+1 endcase endfor thisform.text2.value=z1 thisform.text3.value=z2 (1)执行该程序后,“统计1”右边的文本框Text2和“统计2”右边的文本框Text3中的数据值分别为5、22 (2)Text2和Text3的初值分别为0、0 2、有数据表“图书.DBF”包含书号、书名、出版社、作者等字 段,设计如图1所示表单,表单运行后,单击命令按钮可以在 表格控件中显示图书表的部分字段的数据,如图1所示,请选 择并完善代码。 命令按钮的CLICK事件代码: USE 图书 copy TO TS FIELDS 书号,书名 THISFORM.GRID1.RECORDSOURCETYPE=0 THISFORM.GRID1.RECORDSOURCE=”TS” 表单的UNLOAD(释放对象时发生)事件: CLOSE ALL DROP TABLE TS 3、考生数据表(文件名为:KS.DBF)中有“准考证号/C/9”、 “密码/C/6”、“成绩/N/5/1”等字段。设计如图2所示表单, 将考生数据表添加到表单的数据环境中,表单运行后,在表单 的文本框TEXT1中输入查询考生的准考证号,文本框TEXT2 中输入该考生的查询密码后,单击“查询”按钮,查询该考生 的成绩,并将该考生的成绩显示在表单的标签LABEL3中(考 号或密码输入错误,则弹出提示窗口显示“准考证号或密码错 误!”)。请选择并完善代码。 “查询”按钮的CLICK事件代码如下: SELECT KS

用js创建form表单并提交

<%@page contentType="text/html;charset=UTF-8"%> <%@include file="/WEB-INF/include.inc.jsp"%>

风俗习惯

使用AJAX提交Form表单

使用AJAX提交Form表单的方法,其中主要的就是ajaxForm()和ajaxSubmit(),ajaxForm和ajaxSubmit都支持众多的选项参数,这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象,它包含了如下一些属性与值的集合: Options对象的详解: 1.)target 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery 选择器字符串,一个jQuery对象,或者一个DOM元素。 默认值:null。 2.)url 重写或者指定表单的'action'属性。 默认值:表单的action属性值 3.)type 重写或者指定表单的'method' 属性,"GET"或"POST"。 默认值:表单的method属性值(如果没有找到默认为“GET”)。 4.)beforeSubmit 表单提交前被调用的回调函数,该方法通常被提供来运行预提交逻辑或者校验表单数据。如果"beforeSubmit"回调函数返回false,那么表单将不被提交。"beforeSubmit"回调函数带三个调用参数:数组形式的表单数据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据: [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 默认值:null 5.)success 表单成功提交后调用的回调函数。如果提供"success"回调函数,当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。 默认值:null 6.)dataType 期望服务器的的回应的类型。null、"xml"、"script"或者"json"其中之一。dataType提供一种方法,它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持: 'xml':如果dataType == 'xml',将把服务器响应作为XML来对待。同时,如果“success”回调方法被指定,将传回responseXML值 'json':如果dataType == 'json',服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。 'script':如果dataType == 'script',服务器响应将求值成纯文本。 默认值:null(服务器返回responseText值) 7.)semantic 布尔标志,表示数据是否必须严格按照语义顺序来进行提交。注意:一般来说,表单已经按照语义顺序来进行了串行化(或序列化),除了type="image"的input 元素。如果你的服务器有严格的语义要求,以及表单中包含有一个type="image"的input元素,就应该将semantic设置为true。

表单验证提交

ThinkPHP示例之:表单提交验证 本示例是表单提交验证处理,提交的时候增加了验证码?防止机器人添加数据。 验 证 码: 刷新验证码

法机关的 哈哈哈[6930@https://www.doczj.com/doc/e15689692.html, 2011-01-07 13:46:37] 惹人是否四大发生的个而归去大哥司法官阿文哥如果吧;lkkk凭空平【上课;浦东司法机关的 233 [chlyyy216@https://www.doczj.com/doc/e15689692.html,2011-04-29 17:18:24] 43 233 [chlyyy216@https://www.doczj.com/doc/e15689692.html,2011-04-29 17:18:32] 43 233 [chlyyy216@https://www.doczj.com/doc/e15689692.html,2011-04-29 17:18:34] 43 233 [chlyyy216@https://www.doczj.com/doc/e15689692.html,2011-04-29 17:18:36] 43 233 [chlyyy216@https://www.doczj.com/doc/e15689692.html,2011-04-29 17:18:37] 43 233 [chlyyy216@https://www.doczj.com/doc/e15689692.html,2011-04-29 17:18:37] 43 233 [chlyyy216@https://www.doczj.com/doc/e15689692.html,2011-04-29 17:18:37] 43 233 [chlyyy216@https://www.doczj.com/doc/e15689692.html,2011-04-29 17:18:38] 43 233 [chlyyy216@https://www.doczj.com/doc/e15689692.html,2011-04-29 17:18:38] 43 233 [chlyyy216@https://www.doczj.com/doc/e15689692.html,2011-04-29 17:18:42] 43

$this->display(); } // 检查标题是否可用 public function checkTitle() { if(!empty($_POST['title'])) { $Form = D("Form"); if($Form->getByTitle($_POST['title'])) { $this->error('标题已经存在'); }else{ $this->success('标题可以使用!'); } }else{ $this->error('标题必须'); } } // 处理表单数据 public function insert() { $Form = D("Form"); //验证码验证 if($_SESSION['verify'] != md5($_POST['verify'])) { $this->error('验证码错误!'); } if($vo = $Form->create()) { if($Form->add()){ $vo['create_time'] = date('Y-m-d H:i:s',$ vo['create_time']); $vo['content'] = nl2br($vo['content']); $this->ajaxReturn($vo,'表单数据保存成功!',1); }else{

文本预览