jquery ajax提交表单实例

r囧r小猫 2022-06-18 12:43 256阅读 0赞

<script type="text/jscript">
    $(document).ready(function(e) {
    	$(".btn").click(function(){
            var obj = {
                id: $("#id").val(),
                name: $("#name").val(),
                age: $("#age").val(),
                sex: $("input[type=radio]:checked").val(),
    			message:$("#message").val()
            }
    		function check() {
    			//id
    			if (obj.id == '') {
    				alert('id不能为空！');
    				return false;
    			}
    			
    			//name
    			if (obj.name == '') {
    				alert('姓名不能为空！');
    				return false;
    			}
    			
    			//age
    			if (obj.age == '') {
    				alert('年龄不能为空！');
    				return false;
    			}
    			//sex
    			if ($("input[name='sex']:checked").size()==0) {
    				alert('请选择性别！');
    				return false;
    			}
    			//age
    			if (obj.message == '') {
    				alert('留言内容不能为空！');
    				return false;
    			}
    			return true;
    		}
    		var chk = check();
    		
    		if(chk){		
    			$.ajax({
                type: "post",
    			//dataType: "json",
    			url: "sub.php",
                data: obj,
    			beforeSend:function(){//触发ajax请求开始时执行    
                   $(".btn").html('提交中').attr({"disabled": "disabled"});//改变提交按钮上的文字并将按钮设置为不可点击    
                },    
    			success: function(result){		
    				$(".btn").html('提交').removeAttr("disabled");
    				if(result.mg != 0) {
    					alert('恭喜你，留言成功!');
    					$('#myform')[0].reset();
    				} else {
    					alert('留言失败，请稍后再试！');
    					$('#myform')[0].reset();					
    				}
    			},
                
            });
    		}
    	})
    	
    });
    </script>

Ajax提交按钮之后将按钮设置为不可点击

$('#submit').click(function(){    
          var objButton=$(this);    
            var content=$('#content').val();    
          $.ajax({    
               url:web_url+'jquery.php',    
               type:'post',    
                cache:false,    
              data: 'action=submit&content='+content,    
               beforeSend:function(){//触发ajax请求开始时执行    
                   objButton.val('提交中').attr('disabled',true);//改变提交按钮上的文字并将按钮设置为不可点击    
             },    
            success:function(txt){//ajax请求成功后执行    
                  //这里做相关逻辑判断了，具体根据自己的情况看了    
            },    
                error:function(){//ajax发生错误时执行    
                  alert('数据请求出错！');    
              },    
            complete:function(){//ajax请求完成时执行    
                  objButton.val('提交').attr('disabled',false);//改变提交按钮上的文字并将按钮设置为可以点击    
             }    
          });    
      });

发表评论取消回复

表情：

评论列表（有 0 条评论，256人围观）

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

相关阅读

相关 jquery ajax 实现表单提交和验证表单

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert t

矫情吗；*/ 2024年02月19日 13:25/ 0 赞/ 52 阅读

相关 JQuery ajax()使用提交表单数据

HTML页面结构： <form id="frm"> 姓名: <input type="text" name="uname" value="John" /><b

快来打我*/ 2024年02月17日 18:13/ 0 赞/ 52 阅读

相关 html ajax提交表单实例,jQuery使用ajaxSubmit()提交表单示例

/ \ 登录 \ @return \/ public String login() \{ HttpServletRequest request= Servle

曾经终败给现在/ 2022年10月10日 02:15/ 0 赞/ 242 阅读

相关 ajax提交表单

ajax提交表单在项目中常用，前台无论是简单的html、jsp或者是使用了easyui框架，提交表单都会使用到ajax，extjs框架其实也是使用了ajax只不过对其进

我就是我/ 2022年08月13日 00:56/ 0 赞/ 265 阅读

相关前端笔记——jquery ajax提交表单

jquery ajax提交表单最近才发现，jquery ajax提交表单可以这么简单 $.ajax({ url: "udpate",

桃扇骨/ 2022年08月03日 15:42/ 0 赞/ 234 阅读

相关 jquery Ajax提交表单（使用jquery Ajax上传附件）

用过jquery的Ajax的人肯定都知道，Ajax的默认编码方式是”application/x-www-form-urlencoded“，此编码方式只能编码文本类型

叁歲伎倆/ 2022年07月26日 05:05/ 0 赞/ 426 阅读

相关 Jquery——Day7（Ajax提交表单）

1、创建数据库名称为“zhiwen”，表为id、user、pass、email、sex、birthday、date 创建php文件：config.php、add.php、

朴灿烈づ我的快乐病毒、/ 2022年07月16日 14:17/ 0 赞/ 239 阅读

相关 jquery序列化表单并ajax提交

1.准备好form表单 <form method="post"> <input type="text" name="username"

女爷i/ 2022年07月12日 06:12/ 0 赞/ 387 阅读

相关 jquery ajax提交表单实例

<script type="text/jscript"> $(document).ready(function(e) { $(".btn").clic

r囧r小猫/ 2022年06月18日 12:43/ 0 赞/ 257 阅读

相关 JQuery AJAX 的表单提交

jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。 jQuery Form 有两个核心的方法--aja

傷城~/ 2022年05月20日 03:34/ 0 赞/ 407 阅读