jQuery实现Ajax方式提交表单

JavaScript/JQuery 专栏收录该内容
20 篇文章 0 订阅

提交表单一般通过同步的方式提交,提交后页面刷新或跳转到新页面来显示服务器端返回的处理结果。如果表单提交后有另外的操作或业务需求需要还在这个页面上显示或处理,那么页面不能整体刷新,这时第一想到的就是采用ajax的方式提交表单。下面完整的介绍一个表单采用ajax方式提交的流程。

一、准备

1、页面引入jQuery文件

2、页面引入jQuery的表单插件jQuery.form.js

二、实施

1、页面中的表单

<form id="mainForm" method="post" enctype="multipart/form-data" class="jsrz_main_information">
      <input type="text" name="UserName" value="" />
      <div class="jsrz_main_button">
                <input type="submit" value="提交" id="agreementSub">
        </div>
</form>

2、提交表单的代码

$("#agreementSub").on("click",function(){
       $('#mainForm').ajaxSubmit(      //ajax方式提交表单
			{
				url: '/personal/kaike',
				type: 'post',
				dataType: 'json',
				beforeSubmit: function () {},
				success: function (data) {
					if (data.Res == "True" || data.Res == true) {
						$('.jsrz_main_check').html('您的申请已提交,我们将会在1-2个工作日内进行审核,请耐心等待!');
					} else {
						alert(data.Msg);
					}
				},
				clearForm: false,//禁止清楚表单
				resetForm: false //禁止重置表单
			});
});


点击提交按钮触发绑定的click事件。
$('#mainForm').ajaxSubmit()//中的代码部分也可以封装为一个方法,在其他地方调用。

三、不使用jQuery.from表单插件的方式

$("#maniForm").submit(function (envent)
{
    envent.preventDefault();
    
    var form = $(this);
    $.ajax({
        url: form.attr("action"),
        type: form.attr("mathod"),
        data: form.serialize(),
        dataType: "json",
        beforeSend: function ()
        {
            $("#ajax-loader").show();
        },
        error: function ()
        {

        },
        complete:function () {
            $("#ajax-loader").hide();
        },
        success: function (data)
        {
            $("#article").html(data);
        }
    });
});

注:表单中必须有类型为submit的input按钮,用来激活submit方法。此种提交方式只能提交表单中比较简单的文本项,对于file类型的数据无法进行提交。input提交按钮的id和name属性的值不能为submit,否则会造成冲突而无法提交表单。

  • 5
    点赞
  • 5
    评论
  • 16
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值