jQuery中 $.get $.post $.getJSON的使用

╰半夏微凉° 2021-07-24 21:03 398阅读 0赞

## jQuery $.get() 方法 ##

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

### 语法： ###

$.get(*URL*,*callback*);

实例：

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            </head>
            <body>
    	        <button onclick="do_get()">获取数据</button>
    	        <p id="txt"></p>
            </body>
    <script  src="jquery-1.5.1.js"></script>
    <script>
    	function do_get(){
    		//请求地址以及参数
    		var url="http://localhost:8080/yszdServer/entry?method=test_get&a=jquery_get";
            $.get(url,function(data){
    	    	document.getElementById("txt").innerText=data;
    	   });
    	}
    </script>
    </html>

点击按钮后：

![20201206215712685.png][]

### $.post() 方法通过 HTTP POST 请求向服务器提交数据。 ###

**语法:**

$.post(*URL,data,callback*);

实例：

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            </head>
            <body>
    	        <button onclick="do_post()">获取数据</button>
    	        <p id="txt"></p>
            </body>
    <script  src="jquery-1.5.1.js"></script>
    <script>
    	function do_post(){
    		//请求地址
    		var url="http://localhost:8080/yszdServer/entry?method=test_post";
    		//参数
    		$.post(url,
    	    {name:"jquery_post"},
    	    function(res){
    	    	document.getElementById("txt").innerText=res;
    	    });
    	}
    </script>
    </html>

运行结果：

![20201206220326446.png][]

**getJSON语法**

$.getJSON(*URL,data,callback*);

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            </head>
            <body>
    	        <button onclick="do_getJson()">获取数据</button>
    	        <p id="txt"></p>
            </body>
    <script  src="jquery-1.5.1.js"></script>
    <script>
    	function do_getJson(){
    		//请求地址
    		var url="http://localhost:8080/yszdServer/entry?method=jquery_getJSON";
    		//参数
    		$.getJSON(
    			url,
    		    {name:"jquery_getJSON",r:Math.random()},
    		    function(res){
    		    	document.getElementById("txt").innerText=res.name;
    		    }
    		);
    	}
    </script>
    </html>

输出：

![20201206221107525.png][]

[20201206215712685.png]: /images/20210724/e94ed76ea30b4600913294d28ed277cb.png
[20201206220326446.png]: /images/20210724/579e5e8b2fbc47b98f1dc7f02152ce03.png
[20201206221107525.png]: /images/20210724/a8e9f343e2694d74ba8f52c77d5c1411.png