Ajax提交form表单数据

Ajax提交form表单数据文章目录前言一、form表单介绍1.什么是表单2.表单form的组成部分3.表单form的属性4.表单的同步提交二、Ajax提交表单数据1.监听表单的提交事件2.阻止表单的默认提交行为3.快速获取表单中的数据4.通过Ajax请求提交表单数据给服务器总结前言本文介绍了表单的基本使用及属性说明,通过Ajax请求方式将网页表单数据提交到服务器的具体实现过程,代码实现在文章末尾。一、form表单介绍1.什么是表单表单在网页中主要负责数据采集功能,采集用户输入信息提交到服务器端进行处理。常见登陆注册页


前言

本文介绍了表单的基本使用及属性说明,通过Ajax请求方式将网页表单数据提交到服务器的具体实现过程,代码实现在文章末尾。


一、form表单介绍

1.什么是表单

表单在网页中主要负责数据采集功能,采集用户输入信息提交到服务器端进行处理。常见登陆注册页面就是通过表单实现的

2.表单form的组成部分

  • 表单标签
  • 表单域
    • 文本框
    • 密码框
    • 隐藏域
    • 多行文本框
    • 复选框
    • 单选框
    • 下拉选择框
    • 文件上传框
  • 表单按钮

3.表单form的属性

  • action 指定表单数据提交的地址
    注意:当表单提交后,页面会立即跳转到action属性指定的URL地址

  • target : 指定action URL 打开的位置, 有5个可选值。
    _self 默认值。在相同框架中打开
    _blank 在新窗口中打开

    _parent 在父框架中打开(很少用)
    _top 在整个窗口中打开(很少用)
    framename 在指定的框架中打开(很少用)

  • method :指定将表单数据提交到action URL 的方式,有2个可选值,大小写都可以。
    get 默认值。
    post

  • enctype : 规定发送表单数据之前如何对数据进行编码,有3个可选值。
    application/x-www-form-urlencoded 在发送前编码所有字符(默认)
    multiparty/form-data 不对字符编码。注意:包含文件上传控件时,必须使用该值。
    text/plain 空格转换为“+”加号,但不对特殊字符编码。(很少用)

4.表单的同步提交

通过点击表单中的submit按钮,触发表单提交的操作,从而使页面跳转到action URL 的行为,叫做表单的同步提交。
但是表单的同步提交会带来两个问题
1、表单同步提交后,整个页面立即跳转到action URL,用户体验很差。
2、表单同步提交后,页面之前的状态和数据会丢失。

解决方案:
表单只负责采集数据,Ajax负责将数据提交到服务器。

二、Ajax 提交表单数据

Ajax提交表单数据主要分为以下几步:

1.监听表单的提交事件

2.阻止表单的默认提交行为

通过e.preventDefault()方法,阻止表单发生同步提交

3.快速获取表单中的数据

为了简化表单中数据的获取操作,jQuery提供了serialize()函数
注意:在使用此函数快速获取表单数据时,必须为每个表单元素添加name属性。

4.通过Ajax请求提交表单数据给服务器

具体实现过程代码如下:

  <!-- 一个简单的表单结构 -->
  <form action="/login" id = "f1">
    <input type="text" name="user_name" />
    <input type="password" name="password" />
    <button type="submit" >提交</button>
  </form>
  <script>
    $(function () { 
   
      // 1.监听表单的提交事件 
      $('#f1').on('submit', function (e) { 
     
         e.preventDefault()                  // 2.阻止表单的默认行为
         var formdata = $('#f1').serialize()             // 3. 快速获取表单中的数据
        //调用的结果:
        // username=用户名的值&password=密码的值
        //因为函数返回结果会用表单元素的name属性来表示,
        //所以使用serialize()快速获取表单数据时需要为每个表单元素设置name属性且不重复

		 // 4.使用$.ajax()发起POST请求
      $.ajax({ 
                                 
        type : 'POST',                       //请求方式
        url : 'http:///www.blabala......',  //请求的URL地址
        data:{ 
   formdata},
        success: function(res) { 
               //请求成功后的回调函数
          console.log(reg);
        }
       })
      })
    })
  </script>

总结

需要注意的几个点:

  • 阻止表单的默认提交行为
  • 使用serialize()函数获取表单数据需要先给每个表单元素设置name属性
  • 表单需要上传文件时,必须将表单属性 enctype设置为multiparty/form-data

谢谢观看!ヾ(≧∇≦*)ゝ

今天的文章Ajax提交form表单数据分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/24128.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注