文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

jquery表单提交的方法实例分析

2024-04-02 19:55

关注

这篇文章主要介绍“jquery表单提交的方法实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jquery表单提交的方法实例分析”文章能帮助大家解决问题。

表单提交的方法有四种:1、“$.ajaxSubmit”方法,需使用“jquery.form”插件;2、“$.getJSON”方法,以GET方式提交数据;3、“$.post”方法,接收相对大的数据;4、“$.ajax”方法,普通封装异步方法。

本教程操作环境:windows10系统、jquery3.2.1版本、Dell G3电脑。

jquery表单提交的方法有哪几种

在jQuery中提交表单的方式有很多种,现在来讲一下经常用到的四种,分别是ajaxSubmit()、getJSON()、post()、ajax()。

一、$.ajaxSubmit方法

使用ajaxSubmit()来提交表单首先要使用第三方插件jquery.form来实现。
一般情况下,直接用form提交的话,提交后的当前页面会跳转到form中的action所指向的页面,假如我们不想提交表单后页面发生跳转,那么我们就可以使用ajaxSubmit()方法来提交。
接下来我们看一下ajaxSubmit()提交的写法:
Html:

<form id="myForm" action="url" method="post">
    <input type="text" name="id"/>
    <button id="btnSubmit">提交</button>
</form>

**jQuery:**1、原始写法(该写法不用在form表单里面填写路径)
jquery表单提交的方法实例分析
2、简便的写法
jquery表单提交的方法实例分析

二、$.getJSON方法

JSON相对于传统的通过GET和POST直接传送裸体数据来讲,JSON在结构上更为合理,也更为安全。getJSON()函数只是设置了JSON函数的ajax()函数的简化版本,相对于get()和post()是传递数据是有一定的优势就是可以跨越使用。
注:因为 $ .getJSON是以GET方式提交数据的,所以不能提交过大的数据量,可选$.post来提交。
写法:Html:

<form id="myForm">
    <input type="text" name="id"/>
    <button onclick="btnSubmit()">提交</button>
</form>

jQuery:
jquery表单提交的方法实例分析
三、$ .post方法

post()函数和getJSON()函数的写法没有什么区别,而post有个特殊之处就是要声明数据格式,即是type,type是请求的数据类型,可以是json、html等类型,如果我们设置参数为:json的话,那么返回的格式则是json格式的;如果没有设置的话,返回的格式都是字符串。
上面有说到,post()函数可以用来接收相对大的数据量,这是相对于其它方法的一个优势,通常很多情况下我们都会选择用post()方法进行提交表单。
来看一下它的写法:
Html:(和$.getJSON提交的html的写法一样)
jQuery:

//提交按钮的点击事件
function btnSubmit(id) {
     //获取页面数据
     var id = $("#myForm [name='id']").val();
     //提交表单
     $.post("url", //请求路径
          {
              id: id  //参数
           },
           function (¬data) {
               if (data.State) {
                    alert(data.Text);
                } else {
                    alert(data.Text);
                }
           }, "json");
}

四、$.ajax方法

$ .ajax是一种常用的普通封装异步方式。
Html:(和$.getJSON提交的html的写法一样)
jQuery:

jquery表单提交的方法实例分析
注:一般在简单情况下,$.ajax可以不带任何参数直接使用。

关于“jquery表单提交的方法实例分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯