jquery实现ajax提交表单信息的方法汇总
- 发布时间：
- 作者：码农之家
- 点击：170
这篇文章主要知识点是关于jquery、ajax、提交表单、的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书
jquery实现ajax提交表单信息的简单方法(推荐)
最近在思考优化项目，想自己扩展一个jquery自动获取表单中的数据进行ajax提交。本人没有完整性学习jquery，基本上是现学现找，有点困难。
主要是扩展和拼接json转对象
很简单，附上代码：
; (function ($) {
$.fn.ajaxForm = function (options) {
var defaults = {
modelname: 'model',//后台对象接收名称
url: '/',//提交地址
postType: 'POST',//提交方式
dataType: 'JSON',//数据返回类型
async: false,//是否异步
optionObj: [],//自定义参数
callback: function () { },//成功回调
};
var options = $.extend(defaults, options);//合并参数
if (options.url == '') {
alert('请填写提交地址');
return;
}
var postvals = {};
//textbox/隐藏域/textarea/radio选中值
$(this).find('input[type="text"],input[type="hidden"],textarea,input[type="radio"]:checked').each(function () {
if ($(this).val() != undefined) {
var name = $(this).attr('name');
if (name == undefined || name == '') {
return false;
}
var value = $(this).val();
var json = '{"' + name + '":"' + value + '"}';
var obj = $.parseJSON(json);
postvals = $.extend(postvals, obj);
}
});
var resObj;
if (options.optionObj != undefined || options.optionObj!=[]) {
resObj = $.extend(postvals,options.optionObj);
} else {
resObj = postvals;
}
$.ajax({
type: options.postType,
dataType: options.dataType,
data: resObj,
async: options.async,
url: options.url,
success: function (json) {
if (json.IsError) {
alert(json.Message);
} else {
options.callback();
}
}
});
};
})(jQuery);
使用的话配合jquery validate使用
$("#system-form").validate({
rules: {
SystemName: {
required: true
},
Description: {
required: true,
},
},
messages: {
SystemName: {
required: "请填写系统名称"
},
Description: {
required: "请填写系统描述"
}
},
submitHandler: function(form) {
var url = '/oa/system/' + $(form).attr('ftype');
$(form).ajaxForm({ url: url,modelname:'system', callback: function() {
location.href = '/oa/system/index.html';
} });
}
});
以上这篇jquery实现ajax提交表单信息的简单方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持码农之家。
以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。
jQuery 相关电子书
学习笔记
<
1
>
jquery创建一个ajax关键词数据搜索实现思路
在web开发过程当中，我们经常需要在前台页面输入关键词进行数据的搜索，我们通常使用的搜索方式是将搜索结果用另一个页面显示，这样的方式对于搭建高性能网站来说不是最合适的，今天给大家分享一下如何 使用 jQuery，MySQL 和 Ajax 创建简单和有吸引力的 Ajax 搜索，这是继《使用jQuery打造一个实用的数据传输模态弹出窗体》第二篇jquery项目实际运用的教程，希望大家在开发项目的时候能够根据自己的实际情况灵活运用 点击搜索默认显示所有的结果 输入A之后显示的搜索结果 输入 p之后显示的搜索结果 没有找到相关的搜索词页面 演示 -点击下面的搜索按钮搜索数据 文件结构 主要用到几个文件 index.php首页 dbcon.php数据库连接文件 search.php搜索处理页面 第一步创建一个ajax_search的数据库，紧接着创建一个ajax_search表 CREATE TABLE `ajax_search` ( `id` int(11) NOT ……
使用jquery的ajax需要注意的地方dataType的设置
昨天在做ajax时遇到问题， SPAN /SPAN$.ajax({ url:'{$weburl}/main.php?action=getDepart if(data.s==1) { $('#depart').html(''); $('#depart').html(data.departs); } else { alert('获取院系失败'); } } }); 以前没有特别注意过这个问题，一开始没有设置dataType:'json',就出现无法解析返回的data数据，会把data当作字符串处理，而不是json对象，所有我使用了eval来转换，而且在服务端由于发回的数据包含了很多html标签，也无法正确读取，导致data报错，我记得以前是不用设dataType的，很奇怪，不知道是不是跟jquery版本有关系，看来以后还是明确设置一下dataType比较好。……
jQuery+ajax读取json数据并按照价格排序示例
本文实例讲述了jQuery+ajax读取json数据并按照价格排序。分享给大家供大家参考，具体如下： !DOCTYPE htmlhtmlhead meta charset="UTF-8" title/title script src="jquery-1.9.1.js"/script script $.ajax({ url: 'data.json',//获取本地json数据，在同文件夹下 type: "get", success: function(resp) { console.log(resp); //原始数据 var data = resp; //原生javascript sort() 方法 data.data.sort(function(good1, good2) { /* 用价格排序由小到大 */ return good1.price1 good2.price1; }); console.log(data.data);//排序后的数据 }, error: function(resp) { alert("系统繁忙，请稍后再试..."); } }); /script/headbody/body/html json数据 data.json： { "code": 0, "data": [{ "id": 16, "title": "fiveplus棉质纯色拼接圆领连衣裙", "name": "FivePlus2017新品女夏装棉质纯色拼接圆领短袖连衣裙2JM2080240", "promotion": "促销活动", "size": "XXl;Xl;M;S;L", "color": "深蓝;深绿", "picMini": "", "pic": "/upload/20170826161653_2……
jquery ajaxfileupload异步上传插件使用详解
由于项目需求在上传头像是需要使用异步上传文件，在上传的过程中需要对文件进行校验：规则如下：宽度和高 度大于200，宽高比要小于2，大小小于2M。 我这里使用的是 AjaxFileUploader 这个组件，服务器使用Struts处理文件。 实例： form action="" id="imageForm" enctype="multipart/form-data" method="POST" input type="file" name="userPhoto" id="userPhoto" input type="button" value="上传" id="shangchuan" /form 这里需要引入两个js文件：jQuery、ajaxfileUpload script type="text/javascript" src="${basePath }/resource/js/plugin/jquery-1.6.min.js"/script script type="text/javascript" src="${basePath }/resource/js/grzx/ajaxfileupload.js"/script js文件： //上传头像 $("#shangchuan").click(function(){ var file = $("#userPhoto").val(); if(file==""){ alert("请选择上传的头像"); return; } else{ //判断上传的文件的格式是否正确 var fileType = file.substring(file.lastIndexOf(".")+1); if(fileTyp……