使用ajax方法实现form表单的提交

编程之家收集整理的这篇文章主要介绍了使用ajax方法实现form表单的提交编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

写在前面的话

在使用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,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()">&nbsp;<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表单的提交全部内容,希望文章能够帮你解决使用ajax方法实现form表单的提交所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

相关文章

猜你在找的HTML相关文章

&lt;input type=&quot;text&quot; maxlength=&quot;5&quot; /&gt; 效果ok, 当&#160;&lt;input type=&quot;numb
直接上答案 &lt;style&gt; input[type=&#39;number&#39;]{-moz-appearance:textfield;} input[type=number]::-we
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说
表格是html中经常使用到的,简单的使用可能很多人都没问题,但是更深入的了解的人恐怕不多,下面我们先来看一下如何使用。 是的上层标签必须在一个里面,它不能单独使用,相当于的属性标签.标示一个表格,标示
html实现一些特殊的符号:大于号:>            &gt;小于号:&号:                   &amp;注册号:              &reg:版权:                  &copy;空格号:               &nbsp;
网站图标favicon制作介绍:favicon.ico一般作为缩略的网站标志,他显示于浏览器的地址栏,表示网站的Logo,如下图红圈所示:下面介绍如何由.jpg或者.png图片生成.icon图标:      http://www.bitbug.net/,打开该网址,即可在线将其他格式的图片生成icon格式的图标。一般生成的图标icon的尺寸选择32*32.在html页面中引用i
有的时候,我们的页面有公共的导航栏navbar,公共的脚注footer,那么我们就想把这些公共部分独立成一个html文件,在要引用的地方像引用js,css一样,给包含进来。Apache下开启SSI配置,使html支持include包含,就可以达到该功能。一共4个操作步骤,下面介绍具体的操作:1、加载SSI模块     找到Apache的安装路径,在Apache文件夹下找到conf文
gbk一般用于繁体中文,是国家标准gb2312基础上扩容后兼容gb2312的标准。文字编码(中英文)用双字节编码,是国家编码,通用性比utf8差,但utf8占用的数据库比gbk大gb2312一般用于简体中文utf8----是全球通用,用于解决国际上字符的一种多字节编码,英文使用8位(一个字节),中文使用28位(3个字节)。现在一般都用utf8编码。允许含BOM,但一般不包含BOM。gb