参考网络代码基础上进行修改,调试通过。

在html中插入下面的代码:

函数ajaxSubmit是submit的ajax形式。

注意:这里面使用到了jquery库

            //<!--将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;
} //<!--将form转为AJAX提交。-->        
       //<!--fn为返回后的回调函数,可以为空-->
function ajaxSubmit(frm, fn) {
var dataPara = getFormJson(frm);
var ajax_para={};
ajax_para['data']=dataPara;
if (!frm.attr('action') ){
ajax_para['url']=this.location.pathname;
}
else{
ajax_para['url']=frm.attr('action');
}
ajax_para['type']=frm.attr('method');
if (!frm.attr('method')){
ajax_para['type']='GET';
} if (fn) {
ajax_para['success']=fn;
}
htmlobj=$.ajax(ajax_para);
return htmlobj;
}

在form提交时候调用该插件

将form中submit按钮修改成

<button type="button" class="btn btn-default" onclick="ajaxSubmit($('form'))">submit</button>

将form转为ajax提交的js代码的更多相关文章

  1. ajax同步请求JS代码

    ajax同步请求JS代码 <script type="text/javascript"> var txt = document.getElementById('txt' ...

  2. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  3. Form表单提交,js验证

    Form表单提交,js验证 1,  Onclick() 2, Onsubmit() Button标签 input (属性 submit  button )标签 Input type=button    ...

  4. jsp不通过form和Ajax提交

    在页面里面我们一般都通过form表单和Ajax向后台提交请求,但是我如今页面没有form表单,也不想通过ajax异步提交. 解决方式例如以下:location.href="${rootPat ...

  5. Ajax注册验证js代码

    分享jquery网站:http://www.css88.com/jqapi-1.9/focusout/ $(document).ready(function() { var bool_user = f ...

  6. ajax提交的javascript代码

    var xhr=xhr(); function xhr(){ if(window.XMLHttpRequest){ return   window.XMLHttpRequest(); }else if ...

  7. ajax提交Form

    Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form ...

  8. 序列化layer创建的弹出表单并ajax提交

    /** *createTime:2015-09-13 *updateTime:2015-09-13 *author:刘俊 *phone:13469119119 *QQ:418873053 **/ va ...

  9. MVC中用ajax提交json对象数组

    应用场景:在前端用ajax向服务器提交json对象数组,在controller的以对象数组作为函数的参数,提交的json数组直接转为服务器端的对象数组. 如: 要将json对象数组[{Id:1,Nam ...

随机推荐

  1. Swagger SpringBoot 集成

    说明:Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集 ...

  2. ubuntu14.10下Qt5.4无法输入中文

    最近学习Qt,于是在ubuntu下安装了开发环境.我是从官网上下载安装的Qt5.4版本.安装后发现在开发过程中无法输入中文.于是在网上搜了搜.解决办法如下: 1.安装fcitx-frontend-qt ...

  3. Elasticsearch集群如何扩容机器?

    前提, Elasticsearch-2.4.3的3节点安装(多种方式图文详解)   比如,你已经成功搭建了3台机器的es集群,如我这里分别是192.168.80.10.192.168.80.11.19 ...

  4. Linux主机名的设置

    Linux主机名的设置 Linux主机名的设置步骤如下: 1.在/etc/sysconfig/network文件中修改HOSTNAME的值为要设置的主机名. HOSTNAME=myhost 2.在/e ...

  5. leetcode:First Missing Positive分析和实现

    题目大意: 传入整数数组nums,求nums中未出现的正整数中的最小值.要求算法在O(n)时间复杂度内实现,并且只能分配常量空间. 分析: 一般碰到这种问题,都先对数组进行排序,再遍历数组就可以找到最 ...

  6. 02-nginx信号量

    刚才完了nginx的编译,nginx的编译还是挺简单的.控制nginx:重启.关闭.只有孤零零的一个二进制文件nginx 通过信号来控制它,Linux操作系统进程与进程之间通过信号来通信.荷兰的一位计 ...

  7. 04-nginx日志管理

    做了几年PHP,老板.经理没说让我管过日志这东西.一般牵涉到日志运维这主要是运维的工作.但是这一章节主要是以拔高性质为主.分析日志的管理方式.PHP程序员不能光靠PHP成为高手,PHP不就if els ...

  8. XHProf安装使用笔记

    编译安装 获取源代码包root@sourcjoy>wget http://pecl.php.net/get/xhprof-0.9.2.tgz解压root@sourcjoy>tar zxf ...

  9. Angular25 组件的生命周期钩子

    1 生命周期钩子概述 组件共有9个生命周期钩子 1.1 生命周期的执行顺序 技巧01:测试时父组件传递对子组件的输入属性进行初始化操作 import { Component, Input, Simpl ...

  10. fDDA

    fDDA:fast DDA,快速的动态数据认证 中国余数定理模式: 就是中国的古人发明的多项式除以多项式的结果的一个定理 AC:应用密文,application cryptogram(密文) gene ...