Ajax简单实例（基于jQuery）

时间：2021-08-15 17:46:52
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8"/>

    <title></title>

    <script src="js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#cmbProvince").on("change", function () {

                var selectIndex = $('#cmbProvince option:selected').val();//选中的值

                var name = $('#cmbProvince option:selected').text();//选中的值

                console.info(selectIndex);

                var provice = {

                    id: selectIndex,

                    name: name

                }˙

                $.ajax({

                    url: "http://localhost:8080/Ajax/linkage",

                    data: JSON.stringify(provice),

                    type: "POST",

                    dataType: "json",

                    success: function (data) {

                        console.info(data);

                        var size = data.length;

                        var optionstring = "";

                        for (var i = 0; i < size; i++) {

                            var item = data[i];

                            optionstring += "<option value='" + item.id + "' >" + item.name + "</option>";

                        }

                        $("#cmbCity").html(optionstring);

                    },

                    error: function (e) {

                        alert("请求处理出错");

                    }

                });

            });

        });

    </script>

</head>

<body>

<select id="cmbProvince" name="cmbProvince">

    <option value="0">请选择省份</option>

    <option value="1">江苏省</option>

    <option value="2">山东省</option>

</select>

<select id="cmbCity" name="cmbCity">

    <option value="0">请选择城市</option>

</select>

</body>

</html>

相关文章