这篇文章主要知识点是关于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的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。
Copyright 2018-2020 www.xz577.com 码农之家
版权投诉 / 书籍推广 / 赞助:520161757@qq.com
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……