欢迎来到知了堂!
知了堂-电话号码 028-87058185

Ajax实现提交form表单到后台并接收返回数据处理-知了堂

Ajax实现提交form表单到后台并接收返回数据处理

  今天知了堂给大家分享使用Ajax实现提交form表单到后台并接收返回数据处理

使用Ajax实现提交form表单到后台并接收返回数据处理

 

  前台html表单

<form action="">
        <ul class="editInfos">
            <li><label><font color="#ff0000">* </font>请输入旧密码:
<input type="text" name="oldPassword" id="oldPassword" required value="" class="ipt" />
            </label></li>
            <li><label><font color="#ff0000">* </font>请输入新密码:
<input type="text" name="newPassword" id="newPassword" required value="" class="ipt" />
            </label></li>
            <li><label><font color="#ff0000">* </font>请重复新密码:
<input type="text" name="reNewPassword" id="reNewPassword" required value="" class="ipt" />
            </label></li>
            <li><input onclick="ajax_submit('${loginUser.username }');
"  value="确认提交" class="submitBtn" /></li>
        </ul>
</form>

  ajax提交数据并接收处理

 

 function ajax_submit(username) {
            var oldPassword = $("#oldPassword").val();//获取表单的输入值;
            var newPassword = $("#newPassword").val();//获取表单的输入值;
            $.ajax({
                type: "post",  //数据提交方式(post/get)
                url: "/editPassword",  //提交到的url
                data: {"username":username,"oldPassword":oldPassword,"newPassword":newPassword},
//提交的数据
                dataType: "json",//返回的数据类型格式
                success: function(msg){
                    if (msg.success){  //修改成功
                        //修改成功处理代码...
 
                    }else {  //修改失败
                        //修改失败处理代码...
 
                    }
                }
            });
        }

 

  版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习前端技术时使用