Ajax提交form表单数据


前言

本文介绍了表单的基本使用及属性说明,通过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

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

  • 14
    点赞
  • 116
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
回答: 在原生ajax中,可以通过以下步骤来提交form单数据进行post请求。首先,获取form单元素并将其转换为formData单对象。然后,创建一个XMLHttpRequest对象,并配置它的请求方式和URL。如果需要发送跨域请求并携带cookie信息,可以设置xhr的withCredentials属性为true。接下来,发送请求并传递formData作为请求参数。最后,监听服务器端给予的响应内容,可以通过xhr的onload事件来获取响应数据。\[1\] 在jQuery中,可以通过以下步骤来提交form单数据进行post请求。首先,获取form单元素并将其赋值给一个变量。然后,使用$.ajax方法发送post请求,配置请求的类型、URL和数据。如果需要处理formData类型的数据,可以设置processData和contentType属性为false。最后,可以在success回调函数中处理服务器端返回的响应数据,或在error回调函数中处理请求失败的情况。\[2\] 需要注意的是,无论是原生ajax还是jQuery,如果要模拟form提交数据,需要在发送请求前设置请求头的Content-Type为"application/x-www-form-urlencoded",并将单中的数据以键值对的形式拼接成字符串,并作为send函数的参数发送。\[3\] #### 引用[.reference_title] - *1* *2* [通过ajax提交form单数据的几种方式](https://blog.csdn.net/chenshanqiang/article/details/103934308)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [AJAX学习笔记——发送AJAX的POST请求,模拟from提交](https://blog.csdn.net/weixin_62117675/article/details/127816648)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值