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

我不是女神ヾ 2021-07-26 20:47 672阅读 0赞
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>login test</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <meta http-equiv="pragma" content="no-cache">
  7. <meta http-equiv="cache-control" content="no-cache">
  8. <meta http-equiv="expires" content="0">
  9. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  10. <meta http-equiv="description" content="ajax方式">
  11. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  12. <script type="text/javascript">
  13. function login() {
  14. $.ajax({
  15. //几个参数需要注意一下
  16. type: "POST",//方法类型
  17. dataType: "json",//预期服务器返回的数据类型
  18. url: "/users/login" ,//url
  19. data: $('#form1').serialize(),
  20. success: function (result) {
  21. console.log(result);//打印服务端返回的数据(调试用)
  22. if (result.resultCode == 200) {
  23. alert("SUCCESS");
  24. }
  25. ;
  26. },
  27. error : function() {
  28. alert("异常!");
  29. }
  30. });
  31. }
  32. </script>
  33. </head>
  34. <body>
  35. <div id="form-div">
  36. <form id="form1" onsubmit="return false" action="##" method="post">
  37. <p>用户名:<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
  38. <p>密 码:<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
  39. <p><input type="button" value="登录" onclick="login()"> <input type="reset" value="重置"></p>
  40. </form>
  41. </div>
  42. </body>
  43. </html>

注意事项

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

发表评论

表情:
评论列表 (有 0 条评论,672人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Ajax提交Form

    1. 背景 在java后台开发中,经常要从前端向后台提交表单数据。利用Ajax进行Form表单提交,是很常用的方法。本文主要讲解Ajax提交表单的基本应用。 2. Ajax