首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

通过Ajax提交表单的数据

表单同步提交的缺点 表单同步提交后,整个页面会发生跳转,跳转到action URL所指向的地址,用户体验很差。 表单同步提交后,页面之前的状态和数据会丢失。...解决方案: 表单只负责采集数据,Ajax负责将数据提交到服务器。...监听表单提交事情 在jQuery中,可以使用如下俩种方式,监听到表单提交事件 方法一:            $('#f1').submit(function (e) {                ...alert('监听到了表单提交事件!')          ...}) 阻止表单的默认提交行为 当监听到表单提交事件后,可以调用事件对象的 event.preventDefault()函数,来阻止表单提交和页面的跳转,示例代码如下:            $('

2.2K20
您找到你想要的搜索结果了吗?
是的
没有找到

无需重新编译代码,在线修改表单

我们换一个角度,来看方法1和方法2的区别,发现他们的区别是: 方法1,需要开发、编译和部署程序; 方法2,不需要重新编译程序;     方法2的优势很明显的,但是它必须先开发一个“表单设计器”,这些设计器有的简单...: CheckBox、 DropDownList、 Label、 ListBox、 RadioButton、 TextBox   都继承下IDataControl 接口,那么它们就可以处理数据了,比如加载数据...///////////////////// //填充数据 MyWebForm.Instance.AutoSelectIBForm(this.Controls); 但这不是本文的主题,本文是说如何不重新编译程序...7,重新刷新网页,表单界面是不是多了一个“经手人”信息? 效果如下图: ? 然后再在该表单中进行数据的增加、修改操作,是不是成功了? 8,结束了。...呵呵,通过该方法,是不是实现了你的“无需重新编译在线修改表单”的功能?如果开发一个工具,让用户以图形化的方式来修改表单信息,那就是真正的在线表单修改工具了。

2.3K60

创建联系表单页面并通过 Ajax 提交表单请求数据

container"> 你可以通过填写并提交下面的表单给我发送反馈消息...3、提交表单请求 在上面的视图模板中,可以看到最后额外引入了 /js/contact.js 文件,这个文件是联系表单页面需要额外用到的 JavaScript 脚本文件,目前还不存在,需要编写对应的前端处理代码...代码处理表单数据的异步提交Ajax 请求),关于代码实现细节就不展开介绍了,重点关注 submitSuccess 的情况下,$.ajax({...})...contact.js', 'public/js/contact.js') .sass('resources/sass/app.scss', 'public/css'); 运行 npm run dev 重新编译打包前端代码...我们可以尝试提交表单,会显示报错信息,这就是 jqBootstrapValidation 组件生效的效果: ?

2.2K50

pbootcms使用Ajax无刷新提交留言及表单

PbootCMS 本身对于使用ajax请求进行提交时会返回Json数据,那么我们可以无需使用API的情况下实现ajax 提交留言,并自定义页面提示,提升用户体验。...关于pb的ajax很多文章代码都有个小缺陷,什么都不填点击提交后端显示空白数据,下面我根据官方提供的代码改良了一下 1.表单验证     提交留言 2、Ajax提交 ...//ajax提交留言,由于涉及到提交地址标签的解析,JS需要放在html文件中 function submsg(obj){   var url='{pboot:msgaction}'; //如果是自定义表单则使用地址...[name="contacts"]').val()) {alert('姓名不能为空');returnfalse;   } // 判断在要写入数组前,这里我就举例一个其余的可以发挥自己的想法写   $.ajax

3.4K20
领券