一个简单的 aiax请求例子 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>修改折扣</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            method()
        });
        function method() {
            $.ajax({
                type:"GET",
                url:"/guest/selectInvestorDiscount",
                // data:{"id":val},     // data参数是可选的，有多种写法，也可以直接在url参数拼接参数上去，例如这样：url:"getUser?id="+val,
                //data:"id="+val,
                async:true,   // 异步，默认开启，也就是$.ajax后面的代码是不是跟$.ajx里面的代码一起执行
                cache:true,  // 表示浏览器是否缓存被请求页面,默认是 true
                dataType:"json",   // 返回浏览器的数据类型，指定是json格式，前端这里才可以解析json数据
                success:function(data){
                    $("#discount").text(data);
                },
                error:function(){
                    console.log("发生错误")
                    alert("发生错误");
                },
                complete:function(){
                    console.log("ajax请求完事，最终操作在这里完成")
                }
            });
        }
    </script>

    <script>
        function updateDiscount() {
             var val = $("#discouts").val();
            $.ajax({
                type:"POST",
                url:"/guest/upDiscountByType",
                data:{"discouts":val},     // data参数是可选的，有多种写法，也可以直接在url参数拼接参数上去，例如这样：url:"getUser?id="+val,
                //data:"id="+val,
                async:true,   // 异步，默认开启，也就是$.ajax后面的代码是不是跟$.ajx里面的代码一起执行
                cache:true,  // 表示浏览器是否缓存被请求页面,默认是 true
                dataType:"json",   // 返回浏览器的数据类型，指定是json格式，前端这里才可以解析json数据
                success:function(data){
                    console.log("成功的回调")
                    location.reload()
                },
                error:function(){
                    console.log("发生错误")
                    alert("发生错误");
                },
                complete:function(){
                    console.log("ajax请求完事，最终操作在这里完成")
                    location.reload()
                }
            });
        }
    </script>

</head>
<body>
<div>
    <div>当前折扣：<span id="discount"></span></div>
    <input type="text" id="discouts" placeholder="请输入折扣"/>
    <button onclick="updateDiscount();">修改</button>
</div>

</body>

</body>
</html>

 

posted @ 2020-02-20 11:05  tomingto  阅读(218)  评论(0)  编辑  收藏  举报