前端知识之 Ajax https://www.cnblogs.com/liwenzhou/p/7988087.html
Ajax, 谐音 "阿贾克斯", 是英文 AsynchronousJavascriptAndXML, 中文翻译为异步 Ajax 与 xml 数据传输技术. 是一种网页的局部刷新技术, 也可以叫网页无刷新技术.
Ajax 本质就是利用 JavaScript 提供的 XMLHttpRequest 对象代替浏览器到服务器里面指定的地址中传递参数和操作数据. 这个过程可以在有用户不知情的情况下完成.
原生 JS 的写法:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <body>
- <input type="text" name="city">
- <button id="btn">
- 获取
- </button>
- <div class="info">
- </div>
- <script>
- // JS 中一般都会偷偷在不知道的情况下, 使用 Ajax 请求数据
- var btn = document.querySelector("#btn");
- btn.onclick = function() {
- let city = document.querySelector("input[name=city]");
- // 发送 Ajax 请求数据
- // get / post
- // 1. 创建对象
- let xhr = new XMLHttpRequest();
- // 2. 创建一个 http 请求
- xhr.open("get", `http: //wthrcdn.etouch.cn/weather_mini?city=${city.value}`);
- // console.log(xhr.readyState); //
- // 3. 发送请求 [如果是 post, 则需要在 send 里面传递需要发送给服务端地址的数据]
- xhr.send();
- // 4. 通过监控 Ajax 的状态, 判断 Ajax 是否已经获取到了数据
- xhr.onreadystatechange = function() {
- // console.log(xhr.readyState);
- // Ajax 的执行状态 1-4 数值表示不同的进度
- // 1. http 请求已经创建完成
- // 2. http 请求已经发送
- // 3. http 请求由服务端接收了
- // 4. 服务端已经处理完成本次 http 请求并响应成功
- if (xhr.readyState === 4) {
- if (xhr.status === 200) {
- // 转换成 JSON 对象
- let result = JSON.parse(xhr.responseText);
- let data_list = result.data.forecast;
- let info = document.querySelector(".info");
- let st = ` < table border = "1"width = "500" > `;
- st += ` < tr > `;
- st += ` < td > 日期 < /td><td > 天气 </td > `;
- st += ` < /tr>`;
- for( let data of data_list){
- st += `<tr>`;
- st += `<td>${data.date}</td > <td > $ {
- data.type
- } < /td>`;
- st += `</tr > `;
- }
- st += ` < /table>`;
- info.innerHTML = st;
- }
- }
- }
- }
- /
- </script>
- </body>
- </HTML>
jQuery 中的 Ajax
- $.Ajax({
- type: "", // http 请求方法, get 或者 post
- url: "", // 服务端地址
- data: "", // 如果 http 请求方法是 post, 则可以在 data 编写要上传到服务端的数据
- // 格式: 键 = 值 & 键 = 值 & 键 = 值....
- success: function(response){ // 当 Ajax 执行成功了, 则自动执行 success 对应的匿名函数
- alert( "Data Saved:" + response ); // 服务端返回的数据
- },
- fail:
- });
代码:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <script src="js/jquery-2.2.1.js">
- </script>
- </head>
- <body>
- <input type="text" name="city">
- <button id="btn">
- 获取
- </button>
- <div class="info">
- </div>
- <script>
- $("#btn").on("click",
- function() {
- let $city = $("input[name=city]").val();
- // 发送 Ajax
- // $.Ajax({
- // type: "get",
- // url: "http://wthrcdn.etouch.cn/weather_mini",
- // data: `city=${$city}`,
- // dataType: "json",
- // success(response){
- // console.log(response);
- // },
- // fail(error){
- // console.log(error);
- // }
- // });
- // jQuery 也有 $.get() 和 $.post() 直接指定发送 get 或者 post 请求, 两个方法使用一致
- $.get(`http: //wthrcdn.etouch.cn/weather_mini`,{city: $city}, function(response){
- console.log(response);
- },
- "json");
- });
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3329071.html