Ajax实战篇

前端之家收集整理的这篇文章主要介绍了Ajax实战篇前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这一次我们来使用ajax来实际做一个登陆的例子那么我们之前有一篇文章叫做《人事系统收获之MVC+EasyUI+EF

中我提到过我说的项目所以我们要基于这个架构来进行学习的,那么我们主要对客户端进行讲解

HTML代码

  1. <div>
  2. <input type="text" placeholder="用户名" required="" id="username" onkeydown="KeyDown()" />
  3. </div>
  4. <div>
  5. <input type="password" placeholder="密码" required="" id="password" onkeydown="KeyDown()" />
  6. </div>
  7. <div>
  8. <span class="help-block u-errormessage" id="js-server-helpinfo"></span></div>
  9. <input name="submit" type="button" class="btn btn-primary" id="js-btn-login" value="登录" style="margin-left:120px" onclick ="login()"/>

ajax代码

  1. <script type="text/javascript">
  2. //调用js登陆方法验证用户名,和密码 如果通过,条页面
  3. function login() {
  4. //获取用户名和密码
  5. var userid = $("#username").val();
  6. var password = $("#password").val();
  7. //验证用户名不为空
  8. if (userid == "" || null ) {
  9. $.messager.alert("提示","请输入用户名","info");
  10. return;
  11. }
  12. //验证密码不为空
  13. else if (password == "" || null) {
  14. $.messager.alert("提示","请输密码","info");
  15. return;
  16. } else {
  17. //验证通过,调用LoginController中的confirmation()方法,去B层验证密码是否正确
  18. $.ajax({
  19. url: "/Login/confirmation",data: { userid: userid,password: password },//传入的数据
  20. type: "POST",//返回的类型
  21. dataType: 'text',success: function (data) { //接收返回的数据 判断 成功则跳页面,失败则返回
  22. if (data == "OK") {
  23. //$.messager.alert("提示","登陆成功,请您重新输入!","info");
  24. // //location.reload(true);
  25. window.location.href = "../Main/Main";//你可以跟换里面的网址,以便成功后跳转
  26. //$("#myTable").hide("slow");
  27. //$("#success").show("slow");
  28. } else if (data == "error") {
  29. $.messager.alert("提示","用户名或密码不正确,请您重新输入!","info");
  30. //$("#error").show("slow");
  31. //$("#load").hide("slow");
  32. }else{
  33. alert("输入异常,请重新输入!");}
  34. },error: function () { alert("输入异常,请重新输入!") },//错误提示
  35.  
  36. });
  37.  
  38. }
  39. }
  40.  
  41. function KeyDown() {
  42.  
  43. $('#password').keypress(function (event) {
  44. if (event.keyCode == 13) {
  45.  
  46. login();
  47. }
  48. })
  49.  
  50. $('#username').keypress(function (event) {
  51. if (event.keyCode == 13) {
  52.  
  53. login();
  54. }
  55. })
  56. }
  57. </script>
我们可以看出其实ajax就是JavaScript代码然后加上xml的综合使用的,具体的项目还要具体来说!

猜你在找的Ajax相关文章