jQuery的ajax技术

编辑本博客

ajax=异步的JavaScript和html

load()

从服务器加载数据，并把返回的数据放入备选元素中。这里加载回来的数据可以只有一个p标签，无需head元素等

$("selector").load(url,data,callback)

• url：必选，规定加载的url地址
• data：可选，一同发送的查询字符串键值对的集合
• callback：可选，load方法执行完毕后执行的函数

<script type="text/javascript">
    $(document).ready(function () {
        $("#projects").load('./ajax_data.html');
    })
</script>

请求的同时进行传参

<script type="text/javascript">
    $(document).ready(function () {
        $("#projects").load('./ajax_data.html',{"name":"zhangsan","age":22});
    })
</script>

getJSON()

异步加载JSON数据，获取服务器上的数据，并显示在网页中

$.getJSON(url,[data],[callback])

• url：服务器请求地址
• data：可选参数，请求时发送的数据
• callback：请求完成后的回调函数

  <script type="text/javascript">
      $.getJSON("./data/getJSON.json",function (data) {
          var str=""
          $.each(data,function (index, ele) {
              $("ul").append("<li>"+ele.name+"</li>")
          });
      })
  </script>

get()方法

通过http的get方法从服务器

$.get(ulr,[callback])

post()方法

以post方式向服务器发送数据

$.post(url,[data],[callback])

ajax示例

get方法

<script type="text/javascript">
   $.ajax({url:'./data/data.json',type:'get',dataType:'json',success:function (data) {
            console.log(data);
        },error:function () {

        }})
</script>

post方法

<script type="text/javascript">
    $.ajax({url:'./data/data.json',type:'get',dataType:'json',success:function (data) {
            console.log(data);
        },error:function () {
        }});
    $.ajax({url:"/course",type:'post',data:{a:1,b:2},success:function(data) {
        //data为后台返回的数据
            if(data.state=="ok" && data.status=='200'){
                alert("登录成功")
            }
        },error:function(err) {
        //请求失败调用的函数
        console.log(err)
    }});
</script>