使用jQuery实现Ajax

jQuery对Ajax操作进行了封装，在jQuery中最底层的方法是$.ajax(),

第二层是load(), $.get(), $.post()

第三层是$.getScript(), $.getJSON()

1. load方法可以用于html文档的元素节点，把结果直接加为对应节点的子元素，通常而言，load

方法加载后的数据是一个html片段

var $obj = ...

var url = ...

var args = {key:value,...}

$obj.load(url,args);

2. $.get, $.post, $.getJSON ：更加灵活，除去load方法的情况，大部分时候使用的这三个方法，

1>基本使用

url：Ajax 请求的目标URL

args: 传递的参数： JSON类型

data： Ajax 响应成功后的数据，可能是XML，HTML,JSON

$.get(url,args,function(data)){

})

2>请求JSON数据

$.get(url, args, function(data){

},"JSON")

$.post(url, args, function(data){

},"JSON")

$.getJSON(url, args, function(){

})

testload.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<!-- <script type="text/javascript" src="js/jquery-1.12.3.js"></script> -->
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> -->
<script type="text/javascript">
    $(function() {
        $("a").click(function() {
            alert("1");
            //load 方法处理ajax
            var url = this.href;//this为dom元素
            var args = {
                "time":new Date()
            };//参数为json格式
            
            //load方法时jQuery中最常用的Ajax方法，
            //任何一个html节点都可以使用load方法加载Ajax，结果将直接插入到html节点中
            //能载入远程的HTML代码并插入到dom中，
            $("#content").load(url,args)
            return false;
        });
    });
</script>
<body>
    <a href="helloAjax.txt"> hello Ajax</a>
    <div id="content"></div>
</body>
</html>

猜你喜欢