dedecms ajax表单提交

Posted 2020-12-14 风意不止

推荐几个关键词

1.jquery validate自定义方法
2.dedecms ajax提交表单

记得，一定要百度，不懂的，先不要靠自己的经验

下面是一些代码

html代码

<div class="container">
            <h2 class="text-center"  style="font-weight: 800;">在线留言</h2>
            <div class="row">
                <div class="col-xs-12">
<!--这里一定要写method="post"，不然，ajax提交的时候，就算设置了post，提交的参数，还是会写入到url中--->
                    <form role="form"  id=‘form1‘  method="post">
                        <div class="form-group">
                            <label for="name">名称 <em style="color: red;">*</em></label>
                            <input type="text" class="form-control" id="name" 
                                   placeholder="请输入名称" name="name" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="shouji">手机号 <em style="color: red;">*</em></label>
                            <input type="text" class="form-control" id="shouji" 
                                   placeholder="请输入手机号" name="shouji" autocomplete="off">
                        </div>

                        <input name="mytime" value="" type="hidden"  id="time"  name="time"  />
                        <script type="text/javascript">
                                            window.onload = function(){
                                            var nowDate = new Date();
                                            var str = nowDate.getFullYear()+"-"+(nowDate.getMonth() + 1)+"-"+nowDate.getDate()+" "+nowDate.getHours()+":"+nowDate.getMinutes()+":"+nowDate.getSeconds();
                                            document.getElementById("time").value=str;
                                            }
                        </script>
                        <input type="hidden" name="dede_fields" value="name,text;shouji,text;time,text" />
                        <input type="hidden" name="dede_fieldshash" value="c4691be854e9f9c1d5ff2a0e1d9704ae" />
                        <button type="submit" class="btn btn-default"  id="btn-form1"  style="font-size: .96240942rem;color:#fff;width: 100%; height: 2.75rem; margin: 0px auto; background-color: rgb(255, 156, 0); border-radius: 3px; line-height: 2.75rem;">提交</button>
                    </form>
                </div>
                
            </div>
           
        </div>

js代码

 <script>
            $(function(){

                          // 手机号验证
                        jQuery.validator.addMethod("isPhone", function(value, element) {
                        var length = value.length;
                        var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+d{8})$/;
                        return this.optional(element) || (length == 11 && mobile.test(value));
                        }, "请填写正确的手机号码");
                        // 中文姓名验证，先验证中文，再验证个数
                        jQuery.validator.addMethod(‘chcharacter‘, function(value, element){
                        var tel = /^[u4e00-u9fa5]+$/;
                        console.log(tel.test(value))
                        return this.optional(element) || !(tel.test(value));
                        }, ‘请输入汉字‘);

                        $(‘#btn-form1‘).on(‘click‘,function(){
                            // 先验证,并且设置一个状态，验证通过后，才能提交
                        
                            var status= $("#form1").validate({
                                    rules : {
                                        name : {
                                            required : true,
                                            chcharacter:true,
                                            rangelength:[2,5]
                                        },
                                        shouji : {
                                            required : true,
                                            isPhone:true
                                        }
                                    },
                                    messages : {
                                        name : {
                                            required : ‘请输入姓名‘,
                                            chcharacter:‘请输入汉字‘,
                                            rangelength:‘名字中最少2个汉字，最多5个‘


                                        },
                                        shouji : {
                                            required : ‘请填写手机号‘,
                                            isPhone : ‘手机号格式不正确‘,
                                        }
                                    }
                                });
                                console.log(status.form())

                            // 根据验证的状态，进行判断，再提交

                            if(status.form()){
                                // var list={};
                               
                                var name=$(‘#name‘).val()
                                var shouji=$(‘#shouji‘).val()
                                var time=$(‘#time‘).val()
                                var dataString = ‘name=‘+ name + ‘&action=post&shouji=‘ + shouji + ‘&time=‘ + time + ‘&diyid=1&do=2&dede_fields=name,text;shouji,text;time,text&dede_fieldshash=c4691be854e9f9c1d5ff2a0e1d9704ae&submit=提交‘;
                                // console.log(list)
                                $.ajax({
                                        //请求方式
                                        type : "POST",
                                        //请求的媒体类型,把请求类型注释掉吧
                                        // contentType: "application/json;charset=UTF-8",
                                        //请求地址
                                        url : "http://www.XXX.com/plus/diy.php",
                                        //数据，json字符串
                                        data : dataString,
                                        //请求成功
                                        success : function(result) {
                                            console.log(result);
                                            $.DialogByZ.Autofade({Content: "提交成功，请耐心等待"})
                                        },
                                        //请求失败，包含具体的错误信息
                                        error : function(e){
                                            console.log(e.status);
                                            console.log(e.responseText);
                                        }
                                    })
                            }else{
                                return false;
                            }
                        })
            })
        </script>