layui form submission using form.on ( 'submit (sub)', function () {}) using the cause is not performed when a callback request is ajax and Solutions

ayui module using the official form form.on ( 'submit (sub)', function () {}) submitted a request to the background using a ajax request the results of processing according to the result, a correction can not be performed, and the page refresh occurs

Before we have encountered this problem, use the form tag directly modified into div, add a click event to the submit button by jquery, rather than submit to submit the form.

In today add functionality to modify the password for the complete set time, once again encountered this problem, just a little free, I decided to find out the real reason.

First, debug server-side logic, found normal value, the return value is normal

After, dataType check ajax request is no problem, I returned a string in the service side, I also specify the text attributes.

Baidu after the discovery (Baidu oriented programming) because of the type to use when the button submit, the page will automatically refresh, and we do not want him to refresh.

Reference link: https: //blog.csdn.net/laukitto/article/details/69230348

Since we know the cause, then the problem is like solved, and finally add a return false as long as the submit method to solve

Here is the JS code request to add the last line to solve the problem return false

form.on('submit(sub)',function (){
            var newpwd =  $('#newpwd').val();
            var confirmpwd = $('#confirmpwd').val();
            if(newpwd != confirmpwd){
                $('#rcp').attr('hidden','hidden');
                $('#ecp').removeAttr('hidden');
                layer.msg("两次输入密码不一致");
                return false;
            }else{
                var data = {
                    originPwd:$('#originpwd').val(),
                    newPwd:$('#newpwd').val()
                }
                $.ajax({
                    url:'/user/changePwd',
                    type:'post',
                    dataType:'text',
                    contentType: 'application/json',
                    data:JSON.stringify(data),
                    timeout:2000,
                    beforeSend:function (xhr) {
                        xhr.setRequestHeader(header,token);
                    },
                    success:function(data){
                        console.log(data);
                        if(data == 'success'){
                            layer.msg("密码修改成功");
                            location.href = "/user/loginpage"
                        }else{
                            layer.msg("密码修改失败")
                        }
                    },
                    error:function () {
                        layer.msg ( "password modification failure") 
                    } 
                }) 
            } return to false; 
        })
            

 

 

--------------------------------------- xadmin in the pop-up page, asynchronous commit is turned off - -------------------------------------------------- -----------------------

 

 

         form.on ( 'Submit (the Add)', function (Data) { 
            //console.log(data); 
            // send asynchronous data submitted to the PHP 
            $ .ajax ({ 
                type: 'POST', 
                URL: "{ : URL ( 'ADMIN / the AdminRole / Save')} ", 
                Data: {username:. 1, password: 2}, 
                Success: function (RES) { 
                    IF (== 200 is res.status) { 
                        layer.alert (res.msg , icon {:}. 6, function () { 
                           // get the index frame 
                            var index = parent.layer.getFrameIndex (the window.name); 
                            // Close the current frame 
                            parent.layer.close (index); 
                          }); 
                    } the else { 
                        layer.alert (res.msg, icon {:}. 6, function () { 
                            // get the index frame 
                            var index = parent.layer.getFrameIndex (the window.name); 
                            // Close the current frame 
                            parent.layer.close (index); 
                        }); 
                    } 
                } 
            }); 
              return to false; 
          });