Jquery Ajax

JQuery Ajax

什么是Ajax ?

Ajax 即Asynchronous Javascript And XML（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

Ajax基本结构

$.ajax({          
    url:"发送请求（提交或读取数据）的地址", 
    dataType:"预期服务器返回数据的类型",  
    type:"请求方式", 
    async:"true/false",
    data:{发送到/读取后台（服务器）的数据},
    success:function(data){请求成功时执行},      
    error:function(){请求失败时执行}
});

<1> URL

默认为当前页地址

<2> dataType

可用类型：

• xml：返回XML文档，可用JQuery处理。
• html：返回纯文本HTML信息。
• script：返回纯文本JavaScript代码。
• json：返回json数据。
• jsonp：(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
• text：返回纯文本字符串。

json和jsonp的区别: jsonp可以跨域读取数据

<3> type

可用类型主要为post和get两种（默认为get）

• get：从指定的资源请求数据（从服务器读取数据）
• post：向指定的资源提交要被处理的数据（向服务器提交数据）

<4> async

异步方式，默认为true，即异步方式。当设置为false时，为同步方式。

• 异步方式：ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发ajax里的success方法，这时候执行的是两个线程。
• 同步方式：在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

<5> data

请求的数据，{ }中可以填入多项数据。如果不填（一般为get请求），则读取对应地址的全部数据，此时可以在console中通过console.log(res)显示数据情况。

<6> success 、error

两个函数 一般需要设置，方便确定请求是否成功，以及请求成功后的提示或是对数据的处理和显示。

Ajax 实例

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
	function showAdress(){
 	var str = document.getElementById("text").value;	
    $.ajax({
            url: "https://restapi.amap.com/v3/geocode/geo",
            dataType: "json",
            type: "get",
            data: {address: str,  			
                 key: "7486e10d3ca83a934438176cf941df0c", 
		              },
	    success:function(res){
		       alert(res.geocodes[0].formatted_address+"经纬度："+res.geocodes[0].location);
		       console.log(res);
		   },
	    error:function(){
	    	alert('failed!');
	    },
    });
 }
</script>

---