发布时间：2025-12-10 22:56:02 浏览次数：1
常见的form表单提交方式
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><title>logintest</title><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><metahttp-equiv="pragma"content="no-cache"><metahttp-equiv="cache-control"content="no-cache"><metahttp-equiv="expires"content="0"><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="logintest"></head><body><pid="form-p"><formid="form1"action="/users/login"method="post"><p>用户名:<inputname="userName"type="text"id="txtUserName"tabindex="1"size="15"value=""/></p><p>密 码:<inputname="password"type="password"id="TextBox2"tabindex="2"size="16"value=""/></p><p><inputtype="submit"value="登录"> <inputtype="reset"value="重置"></p></form></p></body></html>
点击登录按钮后,即触发form表单的提交事件,数据传输至后端,由后端控制页面跳转和数据。
ajax实现form提交方式
修改完成后代码如下:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><title>logintest</title><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><metahttp-equiv="pragma"content="no-cache"><metahttp-equiv="cache-control"content="no-cache"><metahttp-equiv="expires"content="0"><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="ajax方式"><scriptsrc="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><scripttype="text/javascript">functionlogin(){$.ajax({//几个参数需要注意一下type:"POST",//方法类型dataType:"json",//服务端接收的数据类型url:"/users/login",//urldata:$('#form1').serialize(),success:function(result){console.log(result);//打印服务端返回的数据(调试用)if(result.resultCode==200){alert("SUCCESS");};},error:function(){alert("异常!");}});}</script></head><body><pid="form-p"><formid="form1"onsubmit="returnfalse"action="##"method="post"><p>用户名:<inputname="userName"type="text"id="txtUserName"tabindex="1"size="15"value=""/></p><p>密 码:<inputname="password"type="password"id="TextBox2"tabindex="2"size="16"value=""/></p><p><inputtype="button"value="登录"onclick="login()"> <inputtype="reset"value="重置"></p></form></p></body></html>注意事项
在常用方式中,点击的登录按钮的type为"submit"类型;
在常用方式中,form的action不为空;
ajax方式中需要注意的是$.ajax方法中的参数:dataType和data。
我平时很少写前端代码,级别也就是入门级别,能看懂能改而已,所以很多时候都是百度,像这次这个功能的实现也是借助了百度,但是,我百度到的代码在$.ajax方法中设置的dataType参数值为"html"而不是"json",导致我在一开始调试的时候一直报错,最终是改成了"json"才成功,因此在这里特别说明并提醒一下,别和我一样走错了路,还有就是向服务端传输的data值了,像上面代码一样,将form表单中的数据序列化传输即可。
感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用Ajax方法实现Form表单的提交”这篇文章对大家有帮助,同时也希望大家多多支持本站,关注本站行业资讯频道,更多相关知识等着你来学习!
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流