jQuery用于请求服务器的函数
post方法
jQuery为我们包装简化了常用的请求方法,其中有一个post方法,此方法可以通过 HTTP POST 请求从服务器载入数据。 语法:
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType);
该方法实际上是简写的 Ajax 方法,等价于:
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
以下使用一个简单的示例演示一下post方法的使用: 服务端代码:
import org.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;
import java.util.Date;
import java.util.HashMap;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String username = req.getParameter("username");
String password = req.getParameter("password");
// 声明返回的数据类型为json格式
resp.setContentType("application/json;charset=utf-8");
PrintWriter printWriter = resp.getWriter();
String date = new Date().toLocaleString();
if (username == null || password == null || password.trim().equals("") || username.trim().equals("")) {
System.out.println("账户或密码为空!" + date);
resp.sendError(500);
return;
}
HashMap<String, String> hashMap = new HashMap();
if (username.equals("lisi") && password.equals("123456a")) {
System.out.println("登录成功!" + date);
hashMap.put("response", "success!");
} else {
System.out.println("用户名或密码不正确!" + date);
hashMap.put("response", "username or password error!");
}
printWriter.write(new JSONObject(hashMap).toString());
printWriter.close();
}
}
客户端代码: html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/post-jq.js"></script>
<body>
<form onsubmit="post_request();return false;" method="post" >
<input type="text" required placeholder="用户名" name="username" /><br>
<input type="password" required placeholder="密码" name="password" /><br>
<button type="submit" >登录</button>
</form>
</body>
</html>
js代码:
function post_request() {
// 第二个参数是json格式的
$.post("login", {
"username": $("input[name='username']").val(),
"password": $("input[name='password']").val()
}, function (data, state) {
// 根据服务端返回的json格式得值,所以需要data.response
alert("data: " + data.response);
alert("state: " + state)
});
}
运行结果:
虽然以上实验已经可以成功的请求服务器并且载入了服务器返回的数据,但是将表单信息转换成json格式的那一段代码还是复杂了一些,每个表单组件的数据都得单独的去获得,如果表单中有十来个组件的话,岂不得写十来句代码去逐个获得。所以这时候就得用到一个可以将表单数据序列化成json格式的神器:jquery.serializeJSON,这是一个基于jQuery的开源插件,以下是该插件的下载地址:
使用该插件后,一句代码就可以解决表单数据序列化成json格式的问题,修改后的代码:
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 要在jQuery之后导入该插件 -->
<script src="js/jquery.serializejson.min.js"></script>
<script src="js/post-jq.js"></script>
<body>
<form onsubmit="post_request(this);return false;" method="post" >
<input type="text" required placeholder="用户名" name="username" /><br>
<input type="password" required placeholder="密码" name="password" /><br>
<button type="submit" >登录</button>
</form>
</body>
</html>
js代码:
function post_request(formObj) {
// 只需要提供表单对象,就可以序列化该表单中的数据为json格式
$.post("login", $(formObj).serializeJSON(), function (data, state) {
alert("data: " + data.response);
alert("state: " + state)
});
}
服务端代码依旧不变,运行结果:
get方法
get和post在使用上基本上是一样的,这是一个简单的 GET 请求功能以取代复杂 .ajax 。请求成功时可调用回调函数。如果想要在出错时执行函数,则需要使用 .ajax。语法:
$(selector).get(url,data,success(response,status,xhr),dataType)
同样的该函数也是简写的 Ajax 函数,等价于:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
示例: 服务端代码只需要把doPost改为doGet即可。 html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.serializejson.min.js"></script>
<script src="js/post-jq.js"></script>
<body>
<form onsubmit="get_request(this);return false;" method="get" >
<input type="text" required placeholder="用户名" name="username" /><br>
<input type="password" required placeholder="密码" name="password" /><br>
<button type="submit" >登录</button>
</form>
</body>
</html>
js代码:
function get_request(formObj) {
$.get("login", $(formObj).serializeJSON(), function (data, state) {
alert("data: " + data.response);
alert("state: " + state)
});
}
运行结果:
思维导图:
AJAX方法
ajax方法是 jQuery 底层的 AJAX 实现,而以上介绍的get和post方法则是ajax方法的简写,ajax方法会返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。 最简单的情况下,ajax() 可以不带任何参数直接使用。 提示:所有的选项都可以通过 $.ajaxSetup() 函数来进行全局设置。
语法:
jQuery.ajax({settings...})
下面的表格中列出了可能的键/值:
示例,服务端代码不变: html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.serializejson.min.js"></script>
<script src="js/post-jq.js"></script>
<body>
<form onsubmit="get_request(this);return false;" method="get" >
<input type="text" required placeholder="用户名" name="username" /><br>
<input type="password" required placeholder="密码" name="password" /><br>
<button type="submit" >登录</button>
</form>
</body>
</html>
js代码:
function ajax_request(formObj) {
$.ajax({
type: "post", // 指定请求方式
url: "login",
async: true, // 开启异步
data: $(formObj).serializeJSON(),
success: function (result, state) { // 回调函数
alert("result: " + result);
alert("state: " + state);
},
dataType: "json"
});
}
运行结果:
- 《Spark快速大数据分析》—— 第七章 在集群上运行Spark
- 以后去Vero Moda买衣服,可以问会“看脸”的AI导购了
- Tensorflow新手通过PlayGround可视化初识神经网络
- [大数据之Spark]——快速入门
- [大数据之Spark]——Actions算子操作入门实例
- [大数据之Spark]——Transformations转换入门经典实例
- 字符串的排列
- 斐波那契额数列及青蛙跳台阶问题
- 在Mac OS X上配置Apache2
- 合并两个排序的链表
- 还有5天,你的比特币最重要的孩子UB-UBTC 可能就永远不属于你了
- Spark SQL 用户自定义函数UDF、用户自定义聚合函数UDAF 教程(Java踩坑教学版)
- Webpack多入口文件、热更新等体验
- 从hello world 解析程序运行机制
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Pandas | Dataframe的merge操作,像数据库一样尽情join
- 每日一题 | 灾后重建问题
- 树形结构已知子节点找父节点
- 解析 hashMap 源码之基本操作 get
- RCE(远程命令/代码执行漏洞)原理及复现
- 我的Vue不小心跨域了o(╥﹏╥)o 干它
- 金九银十准备季——Java后端多线程&并发面试题及答案(二)
- TypeScript 设计模式之观察者模式
- pytest文档46-关于https请求警告问题
- pytest文档45-allure添加环境配置(environment)
- Pytest fixture参数化params
- Python 批量合并 Excel
- 用 Python 了解一下最炫国漫《雾山五行》
- Python 基础(六):列表与元组
- Word 批量转 PDF