【AJAX 教程】Jquery 实现 AJAX 请求的三种方式
Jquery 实现 AJAX 请求的三种方式
目录
Jquery 实现 AJAX 请求的三种方式
简介
项目准备
$.get()方法
$.post()方法
$.ajax()方法
项目演示
简介
JQuery 脚本库里所提供的 AJAX 提交的方法有很多，但主要的方法有 $.get(), $.post(), $.ajax()。其中 $.ajax() 是前两种方法的底层实现，可以提供比前两者更多的属性与参数设置，如果需要高级的设置使用，建议使用 $.ajax() 方法。
项目准备
1.在使用 jquery 之前需要引用 jquery库
可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：
- 从 jquery.com 下载 jQuery 库
- 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
下面是从CDN加载jQuery的代码。
从Google CDN加载jQuery Framework的代码
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>从Microsoft CDN加载jQuery Framework的代码
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"> </script>从jQuery站点加载jQuery Framework的代码（EdgeCast CDN）
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>使用CDN的优势：它减少了服务器的负载。它节省了带宽。jQuery框架将从这些CDN加载更快。最重要的好处是，如果用户访 问过使用任何这些CDN的jQuery框架的任何站点，它将被缓存。
内容传送网络或内容分发网络（CDN）是部署在因特网上的多个数据中心的大型分布式服务器系统。CDN的目标是为具有高可 用性和高性能的最终用户提供内容。
有3个流行的jQuery CDN：谷歌，微软, jQuery。
2.引入相关依赖包
由于本教程涉及到 JSON 数据的解析，所以需要引入相关的 jar 包
（如果只是想参考如何发送 ajax 请求则可以不引入以下 jar 包）
首先要去官方下载 json-lib 工具包 json-lib-2.4-jdk15 .jar，目前最新的是 2.4 的版本，
下载地址： json-lib-2.4-jdk15.jar
json-lib 还需要以下依赖包：
jakarta commons-langx.x
jakarta commons-beanutils x.x.x
jakarta commons-collections x.x.x
jakarta commons-logging x.x.x
ezmorph x.x.x
各个依赖包的下载地址如下。
ezmorph x.x.x：
http://ezmorph.sourceforge.net/
jakarta commons-lang x.x：
http://commons.apache.org/lang/download_lang.cgi
jakarta commons-beanutilsx.x.x:
http://commons.apache.org/beanutils/download_beanutils.cgi
jakarta commons-collections 3.2 ：
http://commons.apache.org/collections/download_collections.cgi
jakarta commons-logging 1.1.1 ：
http://commons.apache.org/logging/download_logging.cgi
不同版本有区别，而且会出现版本冲突，本例各个版本如下：
$.get()方法
$.get() 方法通过远程 HTTP GET 请求载入信息。
语法：
$.get(url,data,success(response,status,xhr),dataType)
注释：
url 必需。规定将请求发送的哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
success(response,status,xhr) 可选。规定当请求成功时运行的函数。
额外的参数：
response - 包含来自请求的结果数据
status - 包含请求的状态
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。
默认执行智能判断（xml、json、script、text、html等）。
核心代码：
function Jquery_AJAX_GET() {$.get('http://localhost:8080/myWeb/LoginController',{name:$('input[name=name]').val(),password:$('input[name=password]').val()},//请求成功时回调函数function(result,status,xhr) {if(result.status == 'error') {$('#errorTips').text("用户名或密码错误!");} else if(result.status == 'success') {window.location.href = "library.html";}},"json")}$.post()方法
$.post() 方法通过 HTTP POST 请求从服务器载入数据。
语法：
$.post(url,data,success(response,status,xhr),dataType)
注释：
url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
额外的参数：
response - 包含来自请求的结果数据
status - 包含请求的状态
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。
默认执行智能判断（xml、json、script、text、html等）
核心代码：
function Jquery_AJAX_POST() {$.post('http://localhost:8080/myWeb/LoginController',{name:$('input[name=name]').val(),password:$('input[name=password]').val()},//请求成功时回调函数function(result,status,xhr) {if(result.status == 'error') { $('#errorTips').text("用户名或密码错误!");} else if(result.status == 'success') {window.location.href = "library.html";}},"json")$.ajax()方法
ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。
大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax() 可以不带任何参数直接使用。
语法：
$.ajax({name:value, name:value, ... })
注释：
该参数规定 AJAX 请求的一个或多个名称/值对。
下面的表格中列出了可能的名称/值：
| 名称 | 值/描述 |
|---|---|
| async | 布尔值，表示请求是否异步处理。默认是 true。 |
| beforeSend(xhr) | 发送请求前运行的函数。 |
| cache | 布尔值，表示浏览器是否缓存被请求页面。默认是 true。 |
| complete(xhr,status) | 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。 |
| contentType | 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。 |
| context | 为所有 AJAX 相关的回调函数规定 "this" 值。 |
| data | 规定要发送到服务器的数据。 |
| dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
| dataType | 预期的服务器响应的数据类型。 |
| error(xhr,status,error) | 如果请求失败要运行的函数。 |
| global | 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
| ifModified | 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
| jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
| jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
| password | 规定在 HTTP 访问认证请求中使用的密码。 |
| processData | 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
| scriptCharset | 规定请求的字符集。 |
| success(result,status,xhr) | 当请求成功时运行的函数。 |
| timeout | 设置本地的请求超时时间（以毫秒计）。 |
| traditional | 布尔值，规定是否使用参数序列化的传统样式。 |
| type | 规定请求的类型（GET 或 POST）。 |
| url | 规定发送请求的 URL。默认是当前页面。 |
| username | 规定在 HTTP 访问认证请求中使用的用户名。 |
| xhr | 用于创建 XMLHttpRequest 对象的函数。 |
项目演示
1. 在 Web 项目下新建一个 login.html 文件实现用户登录，内容如下：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 从jQuery站点加载jQuery Framework的代码（EdgeCast CDN） --><script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script><title>jquery 发送 ajax 请求</title><style>div {width: 240px;height: 100%;margin: 30px auto;}label {margin: 5px auto;height: 22px;line-height: 22px;float: left;}.input {margin: 5px auto;height: 20px;float: right;}#submit {width: 100px;height: 35px;margin: 5px 8px 5px 140px;}</style>
</head>
<body>
<div><form id="myForm" autocomplete="off" ><label>用户名：</label><input class="input" type="text" name="name" placeholder="请输入用户名"><br><label>密码：</label><input class="input" type="password" name="password" placeholder="请输入密码"><br><input id="submit" type="button" value="登录"></form><div id="errorTips" style="text-align: center;font-size: 18px;color: red"></div>
</div>
</body>
</html>
<script>$(function() {var $name = $('input[name=name]');var $password = $('input[name=password]');$('#submit').click(function() {if($name.val() != '' && $password.val() != '') {//使用 $.GET 发送请求//Jquery_AJAX_GET();//使用 $.POST 发送请求//Jquery_AJAX_POST();//使用 $.ajax-get 发送请求//Jquery_AJAX_GET_demo();//使用 $.ajax-post 发送请求Jquery_AJAX_POST_demo();}});//使用 $.get() 发送请求function Jquery_AJAX_GET() {$.get('http://localhost:8080/myWeb/LoginController',{name:$('input[name=name]').val(),password:$('input[name=password]').val()},//请求成功时回调函数function(result,status,xhr) {if(result.status == 'error') { $('#errorTips').text("用户名或密码错误!");} else if(result.status == 'success') {window.location.href = "library.html";}},"json")}//使用 $.post() 发送请求function Jquery_AJAX_POST() {$.post('http://localhost:8080/myWeb/LoginController',{name:$('input[name=name]').val(),password:$('input[name=password]').val()},//请求成功时回调函数function(result,status,xhr) {if(result.status == 'error') { $('#errorTips').text("用户名或密码错误!");} else if(result.status == 'success') {window.location.href = "library.html";}},"json")}//使用 $.ajax() get 方法发送请求function Jquery_AJAX_GET_demo() {$.ajax({type: "get",contentType: "application/json",url: 'http://localhost:8080/myWeb/LoginController',dataType: "json",data: {name:$('input[name=name]').val(),password:$('input[name=password]').val()},async: "true",success: function(result) {if(result.status == 'error') {$('#errorTips').text("用户名或密码错误!");} else if(result.status == 'success') {window.location.href = "library.html";}},error: function(e) {alert("error")}})}//使用 $.ajax() 的 post 方法 发送请求function Jquery_AJAX_POST_demo() {$.ajax({type: "post",contentType: "application/x-www-form-urlencoded",url: 'http://localhost:8080/myWeb/LoginController',dataType: "json",data: $('#myForm').serialize(),success: function(result) {if(result.status == 'error') {$('#errorTips').text("用户名或密码错误!");} else if(result.status == 'success') {window.location.href = "library.html";}},error: function(e) {alert("error")}})}})
</script>2. 编写一个 servlet 用于接收表单数据并验证用户信息，以下是 LoginController.java 文件的内容：
import net.sf.json.JSONObject;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;@WebServlet("/LoginController")
public class LoginController extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("UTF-8");resp.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");PrintWriter out = resp.getWriter();//获取表单数据String name = req.getParameter("name");String password = req.getParameter("password");//判断用户名密码是否正确if("admin".equals(name) && "123456".equals(password)) {JSONObject json = new JSONObject();json.put("status", "success");out.print(json);} else {JSONObject json = new JSONObject();json.put("status", "error");out.print(json);}}
}
3. 再编写一个 library.html ,当用户验证通过时跳转到此页面，内容如下：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 从jQuery站点加载jQuery Framework的代码（EdgeCast CDN） --><script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script><title>图书表</title><style>th,td {height: 20px;border: 1px solid #000000;text-align: center;padding: 5px;}</style>
</head>
<body><button type="button">查看所有图书</button><table id="library"><thead><tr><th>书号</th><th>书名</th><th>类别</th><th>作者</th><th>出版社</th></tr></thead><tbody><tr><th></th><th></th><th></th><th></th><th></th></tr></tbody></table>
</body>
</html>
<script>$(function () {$('button').click(function () {Jquery_AJAX_GET_demo();//Jquery_AJAX_POST_demo();})//使用 $ajax 发送请求function Jquery_AJAX_GET_demo() {$.ajax({type: "get",contentType: "application/json",url: 'http://localhost:8080/myWeb/SelectController',dataType: "json",data: {},async: "true",success: function(result) {showLibrary(result);},error: function(e) {alert("error")}})}function Jquery_AJAX_POST_demo() {$.ajax({type: "post",contentType: "application/json",url: 'http://localhost:8080/myWeb/SelectController',dataType: "json",data: {},async: "true",success: function(result) {showLibrary(result);},error: function(e) {alert("error")}})}function showLibrary(result) {let temp = '';//清空已有的表格内容$('tbody tr').slice(0).remove();for(var i = 0; i < result.length; i++) {temp +="<tr>" +" <td>" + result[i].书号 + "</td>" +" <td>" + result[i].书名 + "</td>" +" <td>" + result[i].类别 + "</td>" +" <td>" + result[i].作者 + "</td>" +" <td>" + result[i].出版社 + "</td>" +"</tr>"}$('#library tbody').append(temp)}})
</script>在这里用 library.json 文件模拟数据库存放的数据，然后用 IO 流读取 library.json 文件模拟数据查询，并返回给前端。
4. SelextController.java 文件内容如下：
import net.sf.json.JSONArray;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;@WebServlet("/SelectController")
public class SelectController extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("UTF-8");resp.setCharacterEncoding("UTF-8");resp.setContentType("application/json;charset=UTF-8");PrintWriter out = resp.getWriter();String books = readJSONFile("E://library.json");JSONArray bookArray = JSONArray.fromObject(books);out.print(bookArray);}//读取 JSON 文件public String readJSONFile(String Path){BufferedReader reader = null;String result = "";try{FileInputStream fileInputStream = new FileInputStream(Path);InputStreamReader inputStreamReader = newInputStreamReader(fileInputStream,"UTF-8");reader = new BufferedReader(inputStreamReader);String tempString = null;while((tempString = reader.readLine()) != null){result += tempString;}reader.close();}catch(IOException e){e.printStackTrace();}finally{if(reader != null){try {reader.close();} catch (IOException e) {e.printStackTrace();}}}return result;}
}
5. library.json 文件内容如下：
[{"书号": "A0120","书名": "庄子","类别": "文学","作者": "庄周","出版社": "吉林大学出版社"},{"书号": "A0134","书名": "唐诗三百首","类别": "文学","作者": "李平","出版社": "安徽科学出版社"},{"书号": "B1101","书名": "西方经济学史","类别": "财经","作者": "莫竹芩","出版社": "海南出版社"},{"书号": "B2213","书名": "商业博弈","类别": "财经","作者": "孔英","出版社": "北京大学出版社"},{"书号": "C1269","书名": "数据结构","类别": "计算机","作者": "李刚","出版社": "高等教育出版社"}
]将项目部署到Tomcat中，经行测试。
【AJAX 教程】Jquery 实现 AJAX 请求的三种方式相关推荐
- jquery调用click事件的三种方式
第一种方式: $(document).ready(function(){$("#clickme").click(function(){alert("Hello World ...
- Java 实现 HTTP 请求的三种方式
除了本文推荐的几种方式,强烈推荐 OkHttp 目前JAVA实现HTTP请求的方法用的最多的有两种:一种是通过HTTPClient这种第三方的开源框架去实现.HTTPClient对HTTP的封装性比较 ...
- java实现HTTP请求的三种方式
From: https://www.cnblogs.com/hhhshct/p/8523697.html 目前JAVA实现HTTP请求的方法用的最多的有两种:一种是通过HTTPClient这种第三方的 ...
- jquery 调用 click 事件 的 三种 方式
第一种方式: $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello Wor ...
- jQuery实现Ajax异步请求的三种方式
jQuery实现Ajax jQuery框架对js原生的ajax进行了封装,封装后的ajax相比原生就变的更加简洁方便,而且功能更加丰富 常用的三种ajax实现的方法: get:$.get(url,[d ...
- ajax是一种异步的请求方式,ajax异步请求的三种方式
Ajax能够在无需加载整个页面的情况下,能够更新部分网页内容,可以减小服务器的资源浪费. ajax大体上有四种实现方式,由于基于JS的实现方式太过于复杂,基本上用不到,所以就暂不贴出其实现代码了. 1 ...
- jquery ajax调用服务器端指定的函数的三种方式
1)通过webservice,注意去掉注释[System.Web.Script.Services.ScriptService]这行前的注释 2)通过aspx.cs文件中的静态方法 3)通过aspx文件 ...
- jquary发送ajax请求的三种方式
ajax= Asynchronous JavaScript and XM (异步JavaScript和XML),通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新,可以在不重新加载整 ...
- Selenium修改HTTP请求头三种方式
什么是HTTP请求头 HTTP请求头是HTTP 协议的重要组成部分.它们定义了 HTTP 消息(请求或响应)并允许客户端和服务器与消息交换可选的元数据.它们由不区分大小写的头字段名称后跟一个冒号,然后 ...
- 前端发送同步请求的三种方式
先发张图,后续记录
最新文章
- 《Leadership and the One Minute Manager》读书笔记之一
- es6 Set的几种使用场景
- 2016-05-29 for循环几种应用
- 客户端soap【JAX-WS入门系列】第04章_SOAP异常处理和Handler处理
- srs推flv流_srs流媒体服务器(simple rtmp server)如何支持h265
- ORA-01843:无效的月份
- python四则运算_四则运算 python
- 他将国际奥赛变成个人秀，哈佛为他打破校规，他的选择让国人骄傲
- 短小有趣的c语言代码,分享一段有趣的小代码
- HashTable,Dictionary,ConcurrentDictionary 的应用场景,区别,用法统计
- 多路径配置udev_多路径multipath配置，udev绑定
- 试验thrift做后端rpc，nginx做web服务器， python后端php前端
- 爬虫开发python工具包介绍 （4）
- 一个队列类的实现(比delphi自带的速度快70倍)
- 394高校毕业设计选题
- Win 10 深度隐藏文件夹命令
- 顺序表的基本操作(含全部代码c)
- 快速搭建多用户共享桌面云环境 云教室环境搭建
- 解决QT-mingw32编译“ too many sections(...)”问题
- 电子烟的使用方法及注意事项