ajax 样式

Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。它是一种构建网站的强大方法。

使用ajax需要以下几点

//编辑一个输入框   再加上一个onclick事件

<div class="row">
<div class="col-md-12" style="margin-top: 15px;">
<p style="margin-left: 35px; margin-top: 20px;">
<input type="text" id="quzhi" name="name" placeholder="请输入需要传递的数值" style="width: 300px; height: 40px;" />
</p>
<p style="margin-left: 80px; margin-top: 30px;">
<input type="button" class="form-control" value="登 陆" onclick="Denglu()" style="width: 200px; height: 30px;" />
</p>
</div>

</div>

//输入后内容后 点击onclick上传按钮
//点击后会触发下面的ajax方法进行取值 传输

<script src="../Scripts/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    function Denglu() {
        debugger;
        //先取值
        var quzhi= $("#quzhi").val();
        //判断渠道的值是否为空  为空则弹窗 提示数值不可为空
        if (quzhi== undefined || quzhi== "" ) {
            return swal({
                title: "值不可为空", //弹出框的title
                type: "warning",      //弹出框类型
                showCancelButton: false,//是否显示取消按钮
                confirmButtonColor: "#DD6B55", //确定按钮颜色
                confirmButtonText: "确定",//确定按钮上面的文档
                cloSEOnConfirm: true
            });
        }

        //使用AJAX将取到的值传入后台验证
        $.ajax(
            {
                type: "POST",
                url: "stkj.ashx?action=fangfa",  //后台文件名为stkj。aspx   文件里的方法名字叫fangfa
                data:{ quzhi: quzhi },//需要传送的数值
                contentType: "application/x-www-form-urlencoded",
                dataType: "json",
                async: false, // 同步或异步
                cache: false,
                success: function (data) {
   //  后台返回值  成功则提示成功
                    if (data.state) {
                        swal({
                            title: data.msg, //弹出框的title
                            type: "success",      //弹出框类型
                            showCancelButton: false,//是否显示取消按钮
                            timer: 500,
                        }, function (isConfirm) {
                            window.location.href = data.url;
                        });

                    }
//不成功则提示失败
                    else {
                        swal({
                            title: data.msg,   //弹出框的title
                            type: "warning",   //淡出框类型
                            showCancelButtun: false,//是否显示取消按钮
                            confirmButtonColor: "#DD6B55",//确定按钮颜色
                            confirmButtonText: "确定", //确定按钮上面的文档
                            cloSEOnConfirm: true,
                            timer: 1000,
                        },
                            function (isConfirm) {
                                window.location.href = data.url;
                            }
                        );
                    }
                },
                //异常时跳出的提示框信息
                error: function () {
                    return swal({
                        title: "登陆异常", //弹出框的title
                        type: "warning",      //弹出框类型
                        showCancelButton: false,//是否显示取消按钮
                        confirmButtonColor: "#DD6B55", //确定按钮颜色
                        confirmButtonText: "确定",//确定按钮上面的文档
                        cloSEOnConfirm: true
                    });
                }
            })

    }

</script>