使用Ajax方法实现Form表单的提交及注意事项

2024-03-06 20:59:18

写在前面的话

在使用form表单的时候,一旦点击提交触发submit事件，一般会使得页面跳转，页面间的跳转等行为的控制权往往在后端，后端会控制页面的跳转及数据传递，但是在某些时候不希望页面跳转，或者说想要将控制权放在前端，通过js来操作页面的跳转或者数据变化。

一般这种异步的操作，我们都会想到ajax方式，因此在实现了功能后就整理了这篇文章，通过ajax方法实现form表单的提交并进行后续的异步操作。

常见的form表单提交方式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>login test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="login test">
</head>
<body>
<div id="form-div">
  <form id="form1" action="/users/login" method="post">
    <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
    <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
    <p><input type="submit" value="登录">&nbsp<input type="reset" value="重置"></p>
  </form>
</div>
</body>
</html>

点击登录按钮后，即触发form表单的提交事件，数据传输至后端，由后端控制页面跳转和数据。

ajax实现form提交方式

修改完成后代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>login test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="ajax方式">
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
    function login() {
      $.ajax({
      //几个参数需要注意一下
        type: "POST",//方法类型
        dataType: "json",//服务端接收的数据类型
        url: "/users/login" ,//url
        data: $('#form1').serialize(),
        success: function (result) {
          console.log(result);//打印服务端返回的数据(调试用)
          if (result.resultCode == 200) {
            alert("SUCCESS");
          }
          ;
        },
        error : function() {
          alert("异常！");
        }
      });
    }
  </script>
</head>
<body>
<div id="form-div">
  <form id="form1" onsubmit="return false" action="##" method="post">
    <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
    <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
    <p><input type="button" value="登录" onclick="login()"> <input type="reset" value="重置"></p>
  </form>
</div>
</body>
</html>

注意事项

在常用方式中，点击的登录按钮的type为"submit"类型；
在常用方式中，form的action不为空；
ajax方式中需要注意的是$.ajax方法中的参数：dataType和data。

我平时很少写前端代码，级别也就是入门级别，能看懂能改而已，所以很多时候都是百度，像这次这个功能的实现也是借助了百度，但是，我百度到的代码在$.ajax方法中设置的dataType参数值为"html"而不是"json"，导致我在一开始调试的时候一直报错，最终是改成了"json"才成功，因此在这里特别说明并提醒一下，别和我一样走错了路，还有就是向服务端传输的data值了，像上面代码一样，将form表单中的数据序列化传输即可。

以上所述是小编给大家介绍的使用Ajax方法实现Form表单的提交及注意事项，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

JS去掉字符串前后空格、阻止表单提交的实现代码

$.trim(str) jQuery内部实现为: function trim(str){ return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,''); } 使用JS和JQuery 阻止表单提交的两种方法 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk">
阻止表单提交按钮多次提交的完美解决方法

如果表单是通过onsubmit进行Ajax提交,注意将表单提交按钮input type属性设为button,尽量不要设置为submit类型. 另外,在提交事件发出后,最好将提交按钮设置为disabled,防止由于网络延时问题,让用户有机会进行多次点击重复提交. onclick事件里面执行 $(this).attr('disabled','disabled'); 在点击一次后立马将按钮设置为不可使用. 或者向如下方法另行定义一个jQuery函数来进行控制: $("form").submi
利用JavaScript阻止表单提交的两种方法

在JavaScript中,阻止表单默认提交行为的方法有两种,分别是: (1) return false 示例代码 <form name="loginForm" action="login.aspx" method="post"> <button type="submit" value="Submit" id="submit">Submit</button&g
javascript下阻止表单重复提交、防刷新、防后退

1 服务器端的解决方法.这是我最为推荐的方法.优点是判断准确,兼容性最大. 做法:a页面显示表单,然后提交b页面处理,处理完后重定向到c页面显示结果. 1.0 在访问a页面时在session里生成一个标志ID,例如 //伪代码 session("submitID")=random() 然后把这个值写到表单的一个hidden的input里 //伪代码 <%response.write("<input name=submitID2 type=hidden val
JavaScript阻止表单提交方法（附代码）

<body> <form action="clock.html" method="post" onsubmit="return checkLength()"> <p>name:<input type="text" name="user" id="user"></p> <input type="submit&quo
用JavaScrip正则表达式验证form表单的方法

document:标签之间 location:url history:前进后退 <html> <head> <script type="text/javascript"> function show() { //弹出一个提示框 window.alert("hh"); } //将show方法绑定到按钮上 window.onload=function() { //定位到按钮 var buttonElement=document.for
onsubmit阻止form表单提交与onclick的相关操作

1. return 的返回值问题,函数中return一旦有返回值,就不在执行下面的语句,直接跳到函数调用的地方.如下PHP函数代码,第一个if条件符合则函数值返回布尔型false,可以返回一个函数的值,并且跳出这个函数:只要遇到return语句,程序就在那一行代码停止执行,执行控制将立刻返回到调用该程序的代码处.function 复制代码代码如下: function chkinput(form) { if(form.title.value=="") { alert("请输入
使用Ajax方法实现Form表单的提交及注意事项

写在前面的话在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化. 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续的异步操作. 常见的form表单提交方式 <!DOCTYPE HTML PUBLIC "-//W3C/
防止Layui form表单重复提交的实现方法

在提交表单数据时,提交按钮为 submit 类型,以layui为js框架时,会重复提交表单数据,为防止这一情况,有效的做法是: 在<form>里面,加上 lay-filter="formConfig" , οnsubmit="return false" , 其中 "formConfig" 为自定义,然后在提交的按钮事件内: form.on("submit(formConfig)",function(data){
php解决和避免form表单重复提交的几种方法

前言为什么要避免form表单被重复提交呢?因为我们不想让我们的服务器重复处理没必要的数据,同时我们也是避免我们的数据库产生重复的数据,避免表单重复提交也是让我们的网站更安全的一种表现. 先看一下有哪些情况下回导致表单重复提交呢,知道哪些情况下可能会出现表单重复提交就可以从根源处理表单重复提交的情况了. 下面的情况就会导致表单重复提交: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. 使用浏览器历史记录重复提交表单. 浏览器重复的HTTP请求. 网页被恶
JavaScript动态创建form表单并提交的实现方法

本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下: // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; f
jQuery扩展方法实现Form表单与Json互相转换的实例代码

JQuery笔记记两段代码,使用JQuery实现从表单获取json与后端交互,以及把后端返回的json映射到表单相应的字段上. 把表单转换出json对象 //把表单转换出json对象 $.fn.toJson = function () { var self = this, json = {}, push_counters = {}, patterns = { "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\]
layui实现form表单同时提交数据和文件的代码

1.jsp页面 ·html代码 <%--用户注册的弹出框--%> <div id="userDiv" style="display: none;"> <form class="layui-form" id="userForm" lay-filter="deptForm" enctype="mutipart/form-data"> <input t
使用layui前端框架弹出form表单以及提交的示例

第一步: 引用两个文件第二步: 点击删除按钮弹出提示框 /*删除开始*/ $(".del").click(function () { var id = $(this).attr("id"); layer.alert('您确定要删除操作吗?', { skin: 'layui-layer-molv' //样式类名自定义样式 , closeBtn: 1 // 是否显示关闭按钮 , anim: 1 //动画类型 , btn: ['确定', '取消'] //按钮 , ic
Jquery让form表单异步提交代码实现

这篇文章主要介绍了Jquery让form表单异步提交代码实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.监听表单提交事件,并阻止表单提交 $("form").submit(function(e) { return false;//阻止表单提交 }) 2.拿到表单内容 let data = $("form").serialize(); //上边这个就是拿到表单的内容,如果你想要json格式,就要自己去处理 /
form表单action提交的js部分与html部分

1.JS部分代码复制代码代码如下: /** * 提交表单 */ function submitForm(action, actName, objName, formName,blogType){ $("#"+formName).attr("action",action); //var f = document.getElementsByTagName("form")[0]; //alert(f.action); $("#"
form表单只提交数据而不进行页面跳转的解决方案

一般的form提交操作写法为复制代码代码如下: <form action="saveReport.htm" method="post"> -- <input type="submit" value="保存报告"/> </form> 点击submit按钮或直接回车可以将数据提交到saveReport页面,但是提交后也会跳转到saveReport页面如何做到将数据提交到saveRepor

使用Ajax方法实现Form表单的提交及注意事项

相关推荐

随机推荐