1、首先需要引入jQuery库【你可以自己去jQuery官方下载或者用他们的cdn】

<script src="https://wangshengxian.com/common/js/jquery-3.3.1.min.js"></script>

2、js jq Ajax请求调用 示例

<script>
    $("#submitData").click(function(){
        //序列化获得表单数据，结果为：user_id=12&user_name=John&user_age=20
        // var submitData=decodeURIComponent(data,true);
        //submitData是解码后的表单数据，结果同上
        $.ajax({
            type:"POST",//请求方式
            url:"url",//请求路径
            data:$('#form-data').serialize(),
            cache:false,//false是不缓存，true为缓存
            async:true,//true为异步，false为同步
            // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
            dataType: 'json',
            beforeSend:function(){
                //请求前 打开loading
                //showLoading();
            },
            success:function(obj){
                //请求成功
                console.log('success',obj);
            },
            complete:function(obj){
                //请求完成 隐藏loading
                //hideLoading();
            },
            error:function(obj){
                //请求失败时
                console.log('error',obj);
                alert("请检查是否自身网络错误，或者是服务器异常了");
            }
        });
        return true; // 阻止默认 form 跳转
    });
</script>

3、HTML 点击表单示例

 
<!-- 点击示例 开始 -->
<form class="forms-sample" id="form-data">
    <button type="button" id="submitData" class="btn btn-primary me-2">提交</button>
</form>
<!--点击示例 结束-->

备注：loading 遮罩层 ，可以参考上一篇文章、或者站内搜索【js ajax 请求时loading效果】