<1> url 默认为当前页地址
<2> dataType 可用类型:
(如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递)
xml:返回XML文档,可用JQuery处理。
html:返回纯文本HTML信息。
script:返回纯文本JavaScript代码。
json:返回json数据。
jsonp:(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
text:返回纯文本字符串。
<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 两个函数 一般需要设置,方便确定请求是否成功,以及请求成功后的提示或是对数据的处理和显示。
位置:HTMLStudy--ajaxtest.jsp <!-- 1.页面上输入一个地址,点击获取经纬度,弹出该地址的经纬度。 --> <!-- 2.伪造的ajax:点击加载网页 --> <%@ 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> <!-- CSS部分 --> <style type="text/css"> .button{ width: 100px; height: 29px; font-size: 16px; color: white; background-color: black; padding: 0; vertical-align: top; border: 0; } .textbox{ height: 25px; padding: 0; vertical-align: top; } span{ font-size: 16px; height: 29px; line-height: 29px; } </style> </head> <body> <!-- javascript部分 --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.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表示请求到的数据 data: { address: str, key: "7486e10d3ca83a934438176cf941df0c", //此处的key值是从此地址请求数据所需的,为data数据中的一项 }, success:function(data){ alert(data.geocodes[0].formatted_address+"经纬度:"+data.geocodes[0].location); //谷歌地图解析 console.log(data); //在console中查看数据 }, error:function(){ alert('failed!'); }, }); } </script> <script type="text/javascript"> window.onload = function (){ var mydate = new Date(); document.getElementById("currentTime").innerText = mydate.getTime(); } function loadPage (){ var targeturl = document.getElementById("url").value; console.log("targeturl"); document.getElementById("iframePosition").src = targeturl; } </script> <!-- html部分 --> <h2>1.点击获取经纬度</h2> <div> <form name="form"> <span>输入地址:</span><input id="text" class="textbox" type="text"/> <input class="button" type="button" value="获取经纬度" onclick="showAdress()"/> </form> </div> <h2>2.加载网页</h2> <div> <p>要加载的网页连接:<span id="currentTime"></span></p> <p> <input type="text" id="url" value="https://www.baidu.com/"> <input type="button" id="button" value="提交" onclick="loadPage()"> </p> </div> <div> <h3>加载页面:</h3> <iframe style="width:500px;height:500px" id="iframePosition" src=""> </iframe> </div> </body> </html>
结果如下:
参考链接:jQuery的Ajax实例(附完整代码)