当前位置:首页 > 编程教程 > jQuery技术文章 > jquery实现ajax提交表单信息的简单方法(推荐)

jquery实现ajax提交表单信息的方法汇总

  • 发布时间:
  • 作者:码农之家
  • 点击:170

这篇文章主要知识点是关于jquery、ajax、提交表单、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Bootstrap与jQuery UI框架设计
  • 类型:jQuery大小:180 MB格式:PDF作者:肖睿//吴振宇
立即下载

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 相关电子书
学习笔记
网友NO.690550

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 ……

网友NO.766501

使用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比较好。……

网友NO.242100

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……

网友NO.115054

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……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com