简单的jQuery+ajax实例

<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="500px;height:500px" id="iframePosition" src="">
    
    </iframe>
</div>

</body>
</html>

结果如下：

参考链接：jQuery的Ajax实例（附完整代码）