var TINY={};
TINY.ajax = function() {
return {
/**
* @param string type 请求类型,post,get(目前只实现了这两种)
* @param strng url 请求的地址
* @param object data 当使用post请求时的请求参数,ex: data=> {name:'adam'}
* @param function callback 成功返回时的回调函数
*/
call : function(type, url, data, callback) {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.XMLHTTP');// for ie
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
callback.call(this, xhr.responseText);
}
}
switch (type.toUpperCase()) {
case 'POST':
xhr.open('POST', url, true);
// 这句比较重要
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
var formData = '';
for ( var i in data) {
formData += i + '=' + data[i] + '&';
}
xhr.send(formData);
break;
default:
xhr.open('GET', url, true);
xhr.send(null)
break;
}
}
}
}();
遍历表单各元素,将参数值组织成JSON格式
这里对CheckBox复选框做了特殊处理,后台接收到的该值为所有复选框值用逗号的拼接
function serialForm(form){
var e = form.elements;
var ht = new Array();
var checkbox = new Array();
for(var i = 0; i < e.length; i++) {
if(e[i].type=="checkbox"){
if(e[i].checked){
if(checkbox[e[i].name] != null) checkbox[e[i].name].push(e[i].value);
else checkbox[e[i].name] = [e[i].value];
}
} else {
ht.push(e[i].name+":'"+e[i].value+"'");
ht.push(",");
}
}
for (var ddd in checkbox ){
ht.push(ddd + ":'" + checkbox[ddd] + "'");
ht.push(",");
}
ht.push("nt:0");
return eval('({' + ht.join("") + '})');
};
AJAX的调用
TINY.ajax.call('post', 'listfrom.do', serialForm(frm), function(data){
var ret = eval('('+data+')');
if(ret.errid==0){
alert(ret.text);
window.location.reload();
}
else{
alert(ret.text);
}
});
谈到服务器端返回的JSON格式数据,支持如下格式
String str = "[{\"mailAddr\":\"edison@163.com\"}, {\"mailAddr\":\"jay@263.com\"}]";
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(str);
前端调用
function show(){
$.post("listmail.do", {"name" : "John"}, function(data){
for(var i = 0; i < data.length; i++){
alert(data[i].mailAddr);
}
}, "json");
}
分享到:
相关推荐
利用jquery的ajax提交表单数据到后台。后台使用spring.
主要介绍了AJAX提交表单数据的方法,实例分析了Ajax调用的原理与实现技巧,需要的朋友可以参考下
以下是Ajax 提交表单数据到入库的全盘操作流程,希望本文对广大php开发者有所帮助,感谢阅读本
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法。$get方式提交表单get() 方法通过远程HTTP ,下面我...
Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值)。在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练“打字水平”的...
Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值)。在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练“打字水平”的...
ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)
首先先说下表单提交吧,要提交表单那么就得先收集表单数据(至于验证这个我就不说了,要说留下下次吧),有了jquery取个html的值还是简单$(“xxid”).val()等就完了,但如果一张表单收集的数据很多,像这样的表单又有...
Ajax如何无刷新提交form里面的内容。
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息。 jQuery 代码: 代码如下: $.ajax({ type: “POST”, url: “some.php”, data: “name=John&location=Boston”, ...
开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加。 在网上看了很多的解决方式,我是用下面这种方法解决的: 1,首先在模板里面加上一个meta : ...
jQuery ajax中数据以键值对(Key/Value)的形式发送到服务器,使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对(key1=value1&key2=value2…)后提交。serialize() 方法使用标准的 ...
如何能达到灵活的程度呢,能像普通的AJAX提交表单数据那样将文件看成是普通表单参数来对待就好了。 灵光一闪,利用javascript的FileReader对象将文件编码成base64再传服务器不就行了么~ 开始动手,丰衣足食。 前端对...
Ajax异步提交表单数据的说明及方法实例,需要的朋友可以参考一下
java导入导出,全部文件jar包,ajax提交form表单后返回提示数据,所有用到的文件,方法,数据,有利于学习,方便运用
Ajax开发过程表单提交数据出现乱码和解决办法