乖兔博客

乖兔 > CMS系统 > HTML > layui通过内置jQuery组件使用ajax方式提交form表单

layui通过内置jQuery组件使用ajax方式提交form表单

乖兔 更新于: 2020-12-07 分类:HTML

layui通过内置jQuery实现ajax提交from表单.png

layui默认是在提交form表单后直接根据表单的acton动作对应的url进行跳转,这种跳转不如ajax的提交方式带给人的体验好。

网上搜索到的layui使用ajax提交表单的教程都是在调用layui的js之前先调用一下jQuery的js文件。而layui实际是内置了jq的。今天的方法就是通过内置的jq来实现ajax提交表单。

layui通过内置jQuery组件使用ajax方式提交form表单代码:

首先,引入layui.js然后html代码如下书写

<form class="layui-form layui-form-pane" action="" id="diyform">
	<div class="layui-form-item">
		<label class="layui-form-label">姓名:</label>
		<div class="layui-input-block">
			<input type="text" name="name" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">电话:</label>
		<div class="layui-input-block">
			<input type="text" name="phone" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
		</div>
	</div>
	
	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn layui-btn-danger" lay-submit lay-filter="formSub">提交</button>
		</div>
	</div>
</form>
<script>
	//Demo    
	layui.use(['jquery', 'form'], function() {
		var form = layui.form,
			$ = layui.$; //这一行就是使用内置jQuery的关键   
		form.render();
		//监听提交    
		form.on('submit(formSub)', function(data) {
			$.ajax({
				url: "/tijiao.php",
				cache: true,
				type: "POST",
				data: $('#diyform').serialize() // 你的form里面的id    
					,
				success: function(data) {
					if(data == "success") {
						layer.open({
							title: '提示',
							content: "提交成功"
						});
					} else {
						layer.open({
							title: '提示',
							content: "请求错误,请联系管理员"
						});
					}
				}
			});
			return false;
		});
	});
</script>


打赏

layui如何使用内部jQuery layui如何使用内部jQuery
« 上一篇12-05