JQuery-AJAX

GET 和POST的区别：

1、get是从服务器上获取数据，post是向服务器传送数据。
2、在客户端， get方式在通过URL提交数据，数据在URL中可以看到；post方式，数据放置在HTML HEADER内提交
3、对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4、get方式提交的数据最多只能有1024字节，而post则没有此限制；
5、安全性问题。使用get的时候，参数会显示在地址栏上，而 post 不会。所以，如果这些数据是中文数据而且是非敏感数据，那么使用 get ；如果用户输入的数据不是中文字符而且包含敏感数据，那么还是使用 post为好。

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.post()方法痛过 HTTP POST请求从服务器上请求数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>城市选择框</title>
        <link rel="stylesheet" href="css/index.css" />
        <style>
            *{
                margin: 0;
                padding: 0;
                border-box: box-sizing;
            }
            html,body{
                width: 100%;
                height: 100%;
            }
            .not{
                width: 600px;
                height: 30px;
                margin: 100px auto 0;
            }
            .select{
                float: left;
                width: 150px;
                height: 100%;
                margin-left: 50px;
                line-height: 30px;
            }
        </style>
    </head>
    <body>
        <div class="sox">
            <select class="provice" id="proviceId">
                <option>--选择省--</option>
            </select>
            <select class="provice" id="city">
                <option>--选择城市--</option>
            </select>
            <select class=" provice" id="code">
                <option>--城市编码--</option>
            </select>
        </div>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            var cityId = null;
            $.get("city.json", function(data,status){
                for (var i = 0; i < data.城市代码.length; i++) {
                    var name = (data.城市代码[el].省);
                    $("#proviceId").append("<option value=" + el + ">" + name + "</option>");
                };
                $("#proviceId").change(function() {
                    $("#city").html("<option>--市--</option>");
                    cityId = ($("#proviceId").val());
                    for (var i = 0; i < (data.城市代码[cityId].市).length; i++) {
                        var city = (data.城市代码[cityId].市[i].市名);
                        $("#city").append("<option value=" + i + ">" + city + "</option>");
                    }
                });
                $("#city").change(function() {
                    $("#code").html("");
                    var cityIda = ($(this).val());
                    var code = (data.城市代码[cityId].市[cityIda].编码);
                    $("#code").append("<option value=" + cityIda + ">" + code + "</option>");
                })
            })
        </script>
    </body>
</html>

 

posted on 2018-09-26 19:53  沉寂在未来  阅读(86)  评论(0)  编辑  收藏  举报

导航