大数据(BD社区)-专业IT技术社区

 找回密码
 bet36体育在线网站

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 1317|回复: 1
打印 上一主题 下一主题

jQuery实现Ajax方式提交表单

[复制链接]

70

主题

73

帖子

395

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
395
跳转到指定楼层
楼主
发表于 2018-7-13 19:18:29 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

一、准备

1、页面引入jQuery文件

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

二、实施

1、页面中的表单


  1.       
  2.       

  3.                
  4.         


  • 复制代码2、提交表单的代码
    1. $("#agreementSub").on("click",function(){
    2.        $('#mainForm').ajaxSubmit(      //ajax方式提交表单
    3.                         {
    4.                                 url: '/personal/kaike',
    5.                                 type: 'post',
    6.                                 dataType: 'json',
    7.                                 beforeSubmit: function () {},
    8.                                 success: function (data) {
    9.                                         if (data.Res == "True" || data.Res == true) {
    10.                                                 $('.jsrz_main_check').html('您的申请已提交,我们将会在1-2个工作日内进行审核,请耐心等待!');
    11.                                         } else {
    12.                                                 alert(data.Msg);
    13.                                         }
    14.                                 },
    15.                                 clearForm: false,//禁止清楚表单
    16.                                 resetForm: false //禁止重置表单
    17.                         });
    18. });
    复制代码
    点击提交按钮触发绑定的click事件。
    1. $('#mainForm').ajaxSubmit()//中的代码部分也可以封装为一个方法,在其他地方调用。
    复制代码
    三、不使用jQuery.from表单插件的方式
    1. $("#maniForm").submit(function (envent)
    2. {
    3.     envent.preventDefault();
    4.    
    5.     var form = $(this);
    6.     $.ajax({
    7.         url: form.attr("action"),
    8.         type: form.attr("mathod"),
    9.         data: form.serialize(),
    10.         dataType: "json",
    11.         beforeSend: function ()
    12.         {
    13.             $("#ajax-loader").show();
    14.         },
    15.         error: function ()
    16.         {

    17.         },
    18.         complete:function () {
    19.             $("#ajax-loader").hide();
    20.         },
    21.         success: function (data)
    22.         {
    23.             $("#article").html(data);
    24.         }
    25.     });
    26. });
    复制代码
    注:表单中必须有类型为submit的input按钮,用来激活submit方法。此种提交方式只能提交表单中比较简单的文本项,对于file类型的数据无法进行提交。input提交按钮的id和name属性的值不能为submit,否则会造成冲突而无法提交表单。

    0

    主题

    3

    帖子

    18

    积分

    禁止发言

    积分
    18
    沙发
    发表于 2018-7-14 14:45:41 | 只看该作者
    提示: 作者被禁止或删除 内容自动屏蔽

    本版积分规则

    Archiver|手机版|小黑屋|BD Inc. ( 京ICP备16038882号-2 )

    GMT+8, 2019-12-24 16:01 , Processed in 0.104349 second(s), 17 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表