当前位置：首页 → 问答吧 → 解除繁琐工作：基于AJAX的表单提交、服务端验证、错误显示的实现（附图和下载）

解除繁琐工作：基于AJAX的表单提交、服务端验证、错误显示的实现（附图和下载）

时间：2008-01-16

来源：互联网

前段时间发表了个类似主题的帖子，但那篇帖子确实因为自己没有准备充分，贴出来估计也没人能看懂，现在好像已经被删了。
遭此大劫后，我奋发图强，呕心沥血，把自己在ＰＨＰ学习过程中，实现的基于AJAX的表单提交、服务端验证、错误显示的这包代码继续规范和整理，再次贴出来并打包下载，仅求抛砖引玉，共同进步。

我觉得在日常开发中，最繁琐的莫过于表单验证和SQL了，在以前ASP开发经历中，我是深有体会啊。所以从学习ＰＨＰ开始，我就把表单验证列入第一个学习阶段，主要解决下面4个问题：
1、表单提交，
2、服务器端验证并将验证结果返回给客户端，客户端验证就免了，两端都要写实在麻烦。
3、客户端友好显示（不要嘣的一声的alert和返回上一页）用户输入错误的提示消息，
4、服务器已经成功处理的提示消息。

现在初见学习成果，不敢独享，还是先用外表吸引你的眼球吧，先帖上来（图抓的偏长，防止这该死的水印）：

初始状态：

AJAX ing（进行时）...

错误提示：

错误提示：

错误提示：

服务已经成功处理：

源代码，带示例和不规范的注释，可直接运行：

ajax_submit_with_valid.rar (42.04 KB)

包里的文件解压到PHP执行环境就可以运行，简单的说下各个文件的功能就是了：

test.html －－－－－－－－测试文件，含一FORM
test.php  －－－－－－－－测试文件，接收FORM
input.php  －－－－－－－－验证用户输入的类，用JOSN格式返回错误消息，用成员变量保存已经验证了数据（表单字段名为成员变量名，输入的值为成员变量的值）
jquery.js －－－－－－－－jquery资源库，本程序依赖
jquery.form.js －－－－－jquery的form插件，本程序依赖
jquery.asv.js －－－－－这个就是实现客户端显示消息的JAVASCRIPT了，基于jquery写的，只有三个函数，最重要的是asv()
form.css  －－－－－－－－这个不用多说，几种不同情况下消息的显示样式
images  －－－－－－－－－............

到此了，不早了，再次呼吁：望抛砖引玉。

[ 本帖最后由 neuron 于 2008-1-16 03:04 编辑 ]

作者: neuron 发布时间: 2008-01-16

试试

作者: PHPChina 发布时间: 2008-01-16

谢谢楼主无私的精神
我也是从ASP转过来
刚开始学习PHP没多长时间
现正学smarty

作者: adleyliu 发布时间: 2008-01-16

极品喔!谢谢楼主.

作者: liuzp 发布时间: 2008-01-16

请教一下,test.html表单提交怎么触发ajax的呢?看不明白下面的代码,请注释一下,谢谢!

复制PHP内容到剪贴板

PHP代码:

$(function(){
asv('#asv_test','asv_init','asv_error','asv_passed');
});

另外jquery.js里的代码有什么用的呢?固定格式的吧

[ 本帖最后由 chyoqin 于 2008-1-16 10:50 编辑 ]

作者: chyoqin 发布时间: 2008-01-16

楼主你写的AJAX 怎么跟http://www.phpchina.com/bbs/view ... &highlight=ajax里面说到的ajax差别这么大呀,可读性太难了.

作者: chyoqin 发布时间: 2008-01-16

引用:

原帖由 chyoqin 于 2008-1-16 10:34 发表
请教一下,test.html表单提交怎么触发ajax的呢?看不明白下面的代码,请注释一下,谢谢!

$(function(){
asv('#asv_test','asv_init','asv_error','asv_passed');
});

另外jquery.js里的代码有什么用的呢?固 ...

复制PHP内容到剪贴板