jQuery的ajax方法
ajxa方法
url
表示请求的地址
type
表示请求的类型
data
表示发送服务器的数据
格式有两种：
一、
name=value&name=value
二、
{key:value}
success
请求成功，响应的回调函数
dataType
响应的数据 常用的数据类型有text 表示纯文本、xml 表示xml数据、json 表示json数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
$(function (){
// ajax请求
$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:8080/JavaWEB/ajax",
//data:"action=jqueryAjax",
data:{action:jqueryAjax},
type:"GET",
success:function (data){
//alert("服务器返回的数据类型："+data);
//var jsonObj=JSON.parse(data);
$("#msg").html("姓名："+data.name+",年龄："+data.age+",性别："+data.sex);
},
dataType:"json"
});
});
});
</script>
<title>Title</title>
</head>
<body>
<div>
<button id="ajaxBtn">$.ajax请求</button>
<button id="getBtn">$.get请求</button>
<button id="postBtn">$.post请求</button>
<button id="getJsonBtn">$.getJson请求</button>
</div>
<div id="msg">
</div>
</body>
</html>
这里引入js包是通过
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
$.get方法
$.post方法
url
带载入页面的url地址
data
待发送key/value参数
callback
载入成功回调函数
type
返回内容格式，xml，html，script，json，text_default
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
$(function (){
// ajax请求
$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:8080/JavaWEB/ajax",
//data:"action=jqueryAjax",
data:{action:jqueryAjax},
type:"GET",
success:function (data){
//alert("服务器返回的数据类型："+data);
//var jsonObj=JSON.parse(data);
$("#msg").html("姓名："+data.name+",年龄："+data.age+",性别："+data.sex);
},
dataType:"json"
});
});
$("#getBtn").click(function (){
$.get({
url:"http://localhost:8080/JavaWEB/ajax",
data:"action=jqueryGet",
success:function(data){
$("#msg").html("get 姓名："+data.name+",年龄："+data.age+",性别："+data.sex);
},
dataType: "json"
});
});
$("#postBtn").click(function (){
$.post({
url:"http://localhost:8080/JavaWEB/ajax",
data:"action=jqueryPost",
success:function(data){
$("#msg").html("post 姓名："+data.name+",年龄："+data.age+",性别："+data.sex);
},
dataType: "json"
});
});
});
</script>
<title>Title</title>
</head>
<body>
<div>
<button id="ajaxBtn">$.ajax请求</button>
<button id="getBtn">$.get请求</button>
<button id="postBtn">$.post请求</button>
<button id="getJsonBtn">$.getJson请求</button>
</div>
<div id="msg">
</div>
</body>
</html>
ajax——jquery 的getJSON方法
概述：通过HTTP GET请求载入JSON数据。
url
请求的url地址
data
发送给服务器的数据
callback
成功的回调函数
$("#getJsonBtn").click(function (){
$.getJSON("http://localhost:8080/JavaWEB/ajax","action=jqueryGetJSON",function (data){
$("#msg").html("getJSON 姓名："+data.name+",年龄："+data.age+",性别："+data.sex)
});
});
表单序列化serialize()
serialize()
可以把表单中所有表单项的内容都获取到，并以
name=value&name=value
的形式进行拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
$(function (){
// ajax请求
$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:8080/JavaWEB/ajax",
//data:"action=jqueryAjax",
data:{action:jqueryAjax},
type:"GET",
success:function (data){
//alert("服务器返回的数据类型："+data);
//var jsonObj=JSON.parse(data);
$("#msg").html("姓名："+data.name+",年龄："+data.age+",性别："+data.sex);
},
dataType:"json"
});
});
$("#getBtn").click(function (){
$.get({
url:"http://localhost:8080/JavaWEB/ajax",
data:"action=jqueryGet",
success:function(data){
$("#msg").html("get 姓名："+data.name+",年龄："+data.age+",性别："+data.sex);
},
dataType: "json"
});
});
$("#postBtn").click(function (){
$.post({
url:"http://localhost:8080/JavaWEB/ajax",
data:"action=jqueryPost",
success:function(data){
$("#msg").html("post 姓名："+data.name+",年龄："+data.age+",性别："+data.sex);
},
dataType: "json"
});
});
$("#getJsonBtn").click(function (){
$.getJSON("http://localhost:8080/JavaWEB/ajax","action=jqueryGetJSON",function (data){
$("#msg").html("getJSON 姓名："+data.name+",年龄："+data.age+",性别："+data.sex)
});
});
$("#submit").click(function (){
//把参数序列化
alert($("#form01").serialize());
$.getJSON("http://localhost:8080/JavaWEB/ajax","action=jquerySerialize&"+$("#form01").serialize(),function (data){
$("#msg").html("jquerySerialize 姓名:"+data.name+",年龄:"+data.age+",性别："+data.sex)
});
});
});
</script>
<title>Title</title>
</head>
<body>
<div>
<button id="ajaxBtn">$.ajax请求</button>
<button id="getBtn">$.get请求</button>
<button id="postBtn">$.post请求</button>
<button id="getJsonBtn">$.getJson请求</button>
</div>
<div id="msg">
</div>
<br><br>
<form id="form01">
用户名：<input type="text" name="username"><br>
密码：<input type="password" name="password"> <br>
下拉单选：
<select name="single">
<option value="single1">single1</option>
<option value="single2">single2</option>
</select>
<br>
下拉多选：
<select name="multiple" multiple="multiple">
<option value="Multiple1" selected="selected">Multiple1</option>
<option value="Multiple2">Multiple2</option>
<option value="Multiple3" selected="selected">Multiple3</option>
</select>
<br>
复选：
<input type="checkbox" name="check" value="check1">check1
<input type="checkbox" name="check" value="check2" checked="checked">check2 <br>
单选：
<input type="radio" name="radio" value="radio1" checked="checked">radio1
<input type="radio" name="radio" value="radio2">radio2 <br>
</form>
<button id="submit">提交-seriliaze</button>
</body>
</html>
服务端servlet程序接收：
protected void jquerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("jquerySerialize 请求过来了");
String username = req.getParameter("username");
String password = req.getParameter("password");
System.out.println("用户名："+username);
System.out.println("密码："+password);
Student student = new Student("张三", 25, "男");
Gson gson = new Gson();
String s = gson.toJson(student);
resp.getWriter().write(s);
}
```
版权声明：本文为qq_45702658原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。