ajax的简单使用

ajax

ajax主要使用的是type url data success这四个属性；type是请求的方式，请求方式有post、delete、update、get等方式主要用的就是这四种。url就是你请求的controller层的地址。data就是你在请求controller层时传给controller层的数据；它是由健跟值来进行获取数据的。success是有后台传到前台的数据在函数的变量属性里；也就是下图的provinces里。这就是简单的ajax；但是在实际的应用中他会跟jq在一起使用。

jq+ajax

  $(function () {
        //发送请求获取所有的省份，
        $.ajax({
            type:"GET",//type:请求方式
            url:"provience",//请求的uri连接地址
            //proviences封装后台返回的JSON数据
            //success:请求成功的回调函数
            success:function (proviences) {
                //proviences是一个集合，获取集合数据，
                //循环生成option标签，value属性值为城市名，显示的数据也是城市名
                for(var i = 0;i < proviences.length;i++){
                    //返回的是List集合通过下标获取数据。
                    //如果返回的是map，根据key获取数据
                    //返回的city对象。根据city.属性名来获取数据
                    var option = $("<option></option>").text(proviences[i]);
                    //生成value属性
                    option.attr("value",proviences[i]);
                    //将option添加到select标签中
                    $("#province").append(option);
                }
            }
        })
    })

    function changeCity() {
        //获取选中的省份的名字
        var pName = $("#province").val();
        alert("省份名字==》"+pName)
        $.ajax({
            type:"GET",
            url:"http://localhost:80/city",
            data:{"pName":pName},
            success:function (cities) {
                //清空城市的下拉框,这串代码就是替换select标签中内容
                $("#city").html("<option value=''>-- 请选择市 --</option>")
                //清空区的下拉框
                $("#district").html("<option value=''>-- 请选择县(区) --</option>")
                for(var i = 0;i < cities.length;i++){
                    var option = $("<option></option>").text(cities[i]);
                    //生成value属性
                    option.attr("value",cities[i]);
                    //将option添加到select标签中
                    $("#city").append(option);
                }
            }
        })
    }

在实际的应用中我们是将ajax封装到jq的 function函数中的；我们需要面对的就是对函数的调用，那么我们改如何来调用呢？jQuery事件有两种主流的写法，
1、找到标签，使用click，change等方法编写
2、在标签中使用onchange，onclick（普通标签调用） onload（加载的页面使用用在body标签）等属性调用方法
在这里有一个前提如果没有使用jquery，那么第一种方式就无法使用，因为cclick，change等方法是jquery的。
在页面加载时需要执行的jq函数我们还可以使用以下这种方法
"$(function(){
//调用的方法名
})
案列的第一个函数就是在页面加载时自主加载；案例的第二个函数就是通过调用进行加载的。

宋姐（总结）

这就是简单的介绍；里面还有很多不足希望各位看友能多多评论与指正；我们互相学习。