ajax无刷新表单提交、验证码的使用

前端之家收集整理的这篇文章主要介绍了ajax无刷新表单提交、验证码的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

无刷新网页表单使用

1、给表单添加验证

  1. //注册验证
  2. $("#myform").valid([
  3. { name: "reg_name",type: "text",isNull: "用户不能为空",onFocus: "请填写用户!" },{ name: "reg_email",type: "mail",isNull: "邮箱不能为空",onFocus: "邮箱格式(*@*.*)",error: "邮箱格式不正确" },{ name: "reg_password",type: "password",isNull: "密码不能为空",onFocus: "请填写6-18位密码",error: "请填写6-18位密码" },{ name: "reg_confirm",type: "eq",error: "两次输入密码不一致",other: { to: "reg_password" } },{ name: "reg_code",type: "ajax",error: "验证码不正确",other: { url: "/Handlers/RegHandler.ashx" } }
  4.  
  5. ],true);

2写入ajaxForm()


  1. //提交注册信息
  2. function ajaxForm() {
  3. $.ajax({
  4. type: "POST",//设置请求发送的方式
  5. timeout: 30000,//设置服务器请求超时时间
  6. url: "/Handlers/UpHandler.ashx",//提交的地址
  7. data: $("#myform").serialize(),//序列化表单元素值
  8. beforeSend: function () {//表单提交前执行的函数
  9. alert("text");
  10. $("#errordiv").text("服务器超时,请稍后再试![关闭]");
  11. $("#errordiv").hide();
  12. $("#zzc").show();
  13. popupDiv("popdiv");
  14. },error: function () {//提交发生错误的时候执行的函数
  15. $("#infodiv").hide();
  16. $("#errordiv").show();
  17. },success: function (data) {//提交成功的时候执行的函数
  18. if (data == "success") {
  19. $("#infodiv").hide();
  20. $("#regsuccess").show();
  21. setInterval(MyTimer,1000)
  22. } else {
  23. $("#infodiv").hide();
  24. $("#errordiv").text(data);
  25. $("#errordiv").show();
  26. }
  27. }
  28. });
  29. }//)

3、后台接受采用一般处理程序
  1. public void ProcessRequest(HttpContext context)
  2. {
  3. context.Response.ContentType = "text/plain";
  4. //如果用户直接访问handler则拒绝
  5. if (context.Request.UrlReferrer == null)
  6. {
  7. context.Response.Write("请求错误!拒绝访问!");
  8. return;
  9. }
  10. //获取请求来路的完整的url
  11. string url = context.Request.UrlReferrer.AbsoluteUri;
  12. if (!url.Contains("/CompanyDishes/DishesBooks"))
  13. {
  14. context.Response.Write("请求错误!拒绝访问");
  15. return;
  16. }
  17. DishBook objBook = new Book()
  18. {
  19. CustomerName = context.Request.Params["CustomerName"],HotelName = context.Request.Params["HotelName"],ConsumeTime = Convert.ToDateTime(context.Request.Params["ConsumeTime"]),CustomerPhone = context.Request.Params["CustomerPhone"],CustomerEmail = context.Request.Params["CustomerEmail"],ConsumePersons = Convert.ToInt32(context.Request.Params["ConsumePersons"]),RoomType = context.Request.Params["selectRoomType"],Comments = context.Request.Params["Comments"] == "" ? "无" : context.Request.Params["Comments"],};
  20. try
  21. {
  22. //提交数据
  23. int count = new BookManager().AddBook(objBook);
  24. if (count > 0)
  25. context.Response.Write("success");
  26. else
  27. {
  28. context.Response.Write("error");
  29. }
  30. }
  31. catch (Exception ex)
  32. {
  33. context.Response.Write("提交失败!" + ex.Message);
  34. throw;
  35. }
  36. }

猜你在找的Ajax相关文章