热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

使用ajax方式提交form表单

jquery本身是没有提交form表单的方法的,但是如果为了提交一个form而引入一个几十k或者几百K的框架的话又没有那个必要,这里我们就使用的原理就是将form表单中得所有控件拼接成name和value组成的键值对的集合然后通过$.ajax提交数据,当提交form表单时实际上

jquery本身是没有提交form表单的方法的,但是如果为了提交一个form而引入一个几十k或者几百K的框架的话又没有那个必要,这里我们就使用的原理就是将form表单中得所有控件拼接成name和value组成的键值对的集合然后通过$.ajax提交数据,当提交form表单时实际上是发了一个简单的ajax请求,只不过请求的数据是通过遍历form中得所有元素得到的。

//调用ajaxSubmit函数提交表单

function subProductForm(url){
    ajaxSubmit(url,$('#product_xx_form'), function(r){
        alert(r);
    });
 }

//将form转为AJAX提交
 function ajaxSubmit(url,frm,fn) {
  var dataPara = getFormJson(frm);
  $.ajax({
   url: url,
   type: 'post',
   data: dataPara,
      async:false, 
      dataType:'text',
   success: fn
  });
 }

//将form中的值转换为键值对。
 function getFormJson(frm) {
  var o = {};
  var a = $(frm).serializeArray();
  $.each(a, function () {
   if (o[this.name] !== undefined) {
    if (!o[this.name].push) {
     o[this.name] = [o[this.name]];
    }
    o[this.name].push(this.value || '');
   } else {
    o[this.name] = this.value || '';
   }
  });

  return o;
 }


推荐阅读
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细介绍了中央电视台电影频道的节目预告,并通过专业工具分析了其加载方式,确保用户能够获取最准确的电视节目信息。 ... [详细]
  • 探讨在循环中调用$.post()时,回调函数为何会在循环结束后才开始执行,并提供解决方案和优化建议。 ... [详细]
  • 本文详细解析了如何使用Python的urllib模块发起POST请求,并通过实例展示如何爬取百度翻译的翻译结果。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 探讨了如何解决Ajax请求响应时间过长的问题。本文分析了一个从服务器获取少量数据的Ajax请求,尽管服务器已经对JSON响应进行了缓存,但实际响应时间仍然不稳定。 ... [详细]
  • 在PHP后端开发中遇到一个难题:通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 在Web开发过程中,Ajax技术常用于前后端数据交互。其中一个重要的属性async决定了请求是否以异步方式执行,本文将详细解析async属性的作用及使用方法。 ... [详细]
  • 作为一名 Ember.js 新手,了解如何在路由和模型中正确加载 JSON 数据是至关重要的。本文将探讨两者之间的差异,并提供实用的建议。 ... [详细]
  • 本文详细介绍了如何在PHP中使用serialize()和unserialize()函数,以及它们在数据传输和存储中的应用。 ... [详细]
  • Netflix利用Druid实现高效实时数据分析
    本文探讨了全球领先的在线娱乐公司Netflix如何通过采用Apache Druid,实现了高效的数据采集、处理和实时分析,从而显著提升了用户体验和业务决策的准确性。文章详细介绍了Netflix在系统架构、数据摄取、管理和查询方面的实践,并展示了Druid在大规模数据处理中的卓越性能。 ... [详细]
author-avatar
手机用户2502862133
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有