jQuery - ajax无刷新保存例子
2009-05-22 14:22
309 查看
最近研究jQuery,今天搞清楚了ajax要怎么实现,使用方法意外的简单。有兴趣的可以看我上次提到的手册,我这里演示一个简单的保存表单的例子。
提交表单的方法:
$.post(’jQuery.php?request=ajax’,$.getForms(’form1′),function (msg) {
alert(msg)
});
仅使用这么一句话就可以实现表单数据的静态提交了。 第一个参数是服务端的URL,第二个参数是表单的POST数据,第三个参数是执行成功后调用的方法.
$.getForms这个方法是自定义的,就是把表单中所有输入框值变成一个GET参数字符串形式 .这个方法是我从xajax中参考修改来的,本来jquery.com上也有这样的插件但是当有name=aa[]这种形式的 input时会出错,只能自己弄一个了。方法在Forms.js文件中,这个文件中还有个$F函数从jquery.com上得到的,是用jQuery实现了prototype.js中的同样功能,就是取表单元素的值。
服务端就没什么特别的:
if ($_GET['request']==’ajax’) {
var_export($_POST);exit;
}
我们输出提交的信息作为测试,自己的应用自己处理就是了。
ajax始终用utf8编码传输的所以,如果你的项目不是utf8必须进行编码转换:
if ($_GET['request']==’ajax’) {
$_POST = charsetIconv($_POST);
}
function charsetIconv($vars) {
if (is_array($vars)) {
$result = array();
foreach ($vars as $key => $value) {
$result[$key] = charsetIconv($value);
}
} else {
$result = iconv(’utf-8′,’gbk’, $vars);
}
return $result;
}
这里是我在服务端编码的处理方式。
原来都在使用xajax现在准备完成使用 jQuery来替代,不仅有非常的JS扩展功能使用也很灵活。
DEMO地址 DEMO下载
提交表单的方法:
$.post(’jQuery.php?request=ajax’,$.getForms(’form1′),function (msg) {
alert(msg)
});
仅使用这么一句话就可以实现表单数据的静态提交了。 第一个参数是服务端的URL,第二个参数是表单的POST数据,第三个参数是执行成功后调用的方法.
$.getForms这个方法是自定义的,就是把表单中所有输入框值变成一个GET参数字符串形式 .这个方法是我从xajax中参考修改来的,本来jquery.com上也有这样的插件但是当有name=aa[]这种形式的 input时会出错,只能自己弄一个了。方法在Forms.js文件中,这个文件中还有个$F函数从jquery.com上得到的,是用jQuery实现了prototype.js中的同样功能,就是取表单元素的值。
服务端就没什么特别的:
if ($_GET['request']==’ajax’) {
var_export($_POST);exit;
}
我们输出提交的信息作为测试,自己的应用自己处理就是了。
ajax始终用utf8编码传输的所以,如果你的项目不是utf8必须进行编码转换:
if ($_GET['request']==’ajax’) {
$_POST = charsetIconv($_POST);
}
function charsetIconv($vars) {
if (is_array($vars)) {
$result = array();
foreach ($vars as $key => $value) {
$result[$key] = charsetIconv($value);
}
} else {
$result = iconv(’utf-8′,’gbk’, $vars);
}
return $result;
}
这里是我在服务端编码的处理方式。
原来都在使用xajax现在准备完成使用 jQuery来替代,不仅有非常的JS扩展功能使用也很灵活。
DEMO地址 DEMO下载
相关文章推荐
- jQuery - ajax无刷新保存例子以及提交表单
- 浏览器刷新页面/关闭页面时,使用jquery+ajax保存数据的方法
- jquery.ajax 的例子
- struts2 +jquery+ajax简单小例子
- 使用jquery.unobtrusive-ajax实现无刷新查询以及优化改进
- 不用jquery等框架实现ajax无刷新登录
- Jquery通过Ajax访问XML数据的小例子
- Jquery 用ajax请求后页面会自动刷新的问题
- jQuery实现AJAX定时局部页面刷新
- 【JAVASCRIPT】jquery实现ajax无刷新评论
- jquery ajax POST 例子详解
- 最简单jquery.ajax+php例子(对话框显示文本框输入内容),以小见大(初学手记)
- jquery 实现页面局部刷新ajax做法
- struts2+ajax+jQuery 保存数据,返回成功与否
- asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
- jQuery的ajaxFileUpload上传插件——刷新一次才能再次调用触发change
- Ajax+JQuery+LinQ实现增删改查无刷新
- php+jQuery+Ajax简单实现页面异步刷新
- Struts2 +jquery+ajaxfileupload 实现无刷新上传图片
- JQuery下的AJAX响应例子