免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码

标题: Ajax提交form表单数据 [打印本页]

作者: admin 时间: 2024-2-17 19:51
标题: Ajax提交form表单数据
<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

欢迎光临免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码 (http://www.ourphp.net/club/)