AJAX 请求
原生 AJAX 请求的示例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 什么是 AJAX 请求
// AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
// ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。
// Ajax 请求的局部更新，浏览器地址栏不会发生变化
// 局部更新不会舍弃原来页面的内容
//
// 在这里使用javaScript语言发起Ajax请求，访问服务器AjaxServlet中javaScriptAjax
function ajaxRequest() {
// 1、我们首先要创建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
// 2、调用open方法设置请求参数
xmlHttpRequest.open("get", "http://localhost:8080/JavaWeb/ajaxServlet?action=jsAjax", true);
// 3、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
var jsonObj = JSON.parse(xmlHttpRequest.responseText);
// 把响应的数据显示在页面上
document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;
}
}
// 4、调用send方法发送请求
xmlHttpRequest.send();
}
</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>
jQuery 中的 AJAX 请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// jQuery 中的 AJAX 请求
// $.ajax 方法
// url 表示请求的地址
// type 表示请求的类型 GET 或 POST 请求
// data 表示发送给服务器的数据
// 格式有两种：
// 一：name=value&name=value
// 二：{key:value}
// success 请求成功，响应的回调函数
// dataType 响应的数据类型
// 常用的数据类型有：
// text 表示纯文本
// xml 表示 xml 数据
// json 表示 json 对象
// $.get 方法和$.post 方法
// url 请求的 url 地址
// data 发送的数据
// callback 成功的回调函数
// type 返回的数据类型
// $.getJSON 方法
// url 请求的 url 地址
// data 发送给服务器的数据
// callback 成功的回调函数
// 表单序列化 serialize()
// serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接
$(function () {
// ajax请求
$("#ajaxBtn").click(function () {
$.ajax({
url: "http://localhost:8080/JavaWeb/ajaxServlet",
// data:"action=jqAjax",
data: {action: "jqAjax"},
type: "GET",
success: function (data) {
// alert("服务器返回的数据是：" + data);
// var jsonObj = JSON.parse(data);
$("#msg").html(" ajax 编号：" + data.id + " , 姓名：" + data.name);
},
dataType: "json"
});
});
// ajax--get请求
$("#getBtn").click(function () {
$.get(
"http://localhost:8080/JavaWeb/ajaxServlet",
"action=getAjax",
function (data) {
$("#msg").html(" getajax 编号：" + data.id + " , 姓名：" + data.name);
},
"json"
)
});
// ajax--post请求
$("#postBtn").click(function () {
// post请求
$.post(
"http://localhost:8080/JavaWeb/ajaxServlet",
"action=postAjax",
function (data) {
$("#msg").html(" postajax 编号：" + data.id + " , 姓名：" + data.name);
},
"json"
)
});
// ajax--getJson请求
$("#getJSONBtn").click(function () {
// 调用
$.getJSON("http://localhost:8080/JavaWeb/ajaxServlet", "action=getJsonAjax",
function (data) {
$("#msg").html(" getJsonAjax 编号：" + data.id + " , 姓名：" + data.name);
})
});
// ajax请求
$("#submit").click(function () {
// 把参数序列化
$.getJSON("http://localhost:8080/JavaWeb/ajaxServlet", "action=serialize&"+$("#form01").serialize(),
function (data) {
$("#msg").html(" serialize 编号：" + data.id + " , 姓名：" + data.name);
})
});
});
</script>
</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 name="username" type="text"/><br/>
密码：<input name="password" type="password"/><br/>
下拉单选：
<select name="single">
<option value="Single">Single</option>
<option value="Single2">Single2</option>
</select><br/>
下拉多选：
<select name="multiple" multiple="multiple">
<option selected="selected" value="Multiple">Multiple</option>
<option value="Multiple2">Multiple2</option>
<option selected="selected" value="Multiple3">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">提交--serialize()</button>
</body>
</html>
package com.xiaoqiu.ajax;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.Method;
/**
* @author 小邱
* @version 0.0.1
* @description BaseServlet
* @since 2021/10/1 12:28
*/
public abstract class BaseServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//解决请求和响应中的中文乱码问题
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String action = req.getParameter("action");
try {
// 获取 action业务鉴别字符串，获取相应的业务 方法反射对象
Method method = this.getClass().getDeclaredMethod(action,HttpServletRequest.class,HttpServletResponse.class);
// 调用目标业务方法
method.invoke(this,req,resp);
} catch (Exception e) {
e.printStackTrace();
}
}
}
package com.xiaoqiu.ajax;
import com.google.gson.Gson;
import com.xiaoqiu.Pojo.Student;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @author 小邱
* @version 0.0.1
* @description AjaxServlet
* @since 2021/10/4 21:42
*/
public class AjaxServlet extends BaseServlet{
protected void jsAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("js请求过来了！");
Student student = new Student(1,"张三");
Gson gson = new Gson();
// json格式的字符串
String s = gson.toJson(student);
resp.getWriter().write(s);
}
protected void jqAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("jq请求过来了！");
Student student = new Student(1,"张三");
Gson gson = new Gson();
// json格式的字符串
String s = gson.toJson(student);
resp.getWriter().write(s);
}
protected void getAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("get请求过来了！");
Student student = new Student(1,"张三");
Gson gson = new Gson();
// json格式的字符串
String s = gson.toJson(student);
resp.getWriter().write(s);
}
protected void postAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("post请求过来了！");
Student student = new Student(1,"张三");
Gson gson = new Gson();
// json格式的字符串
String s = gson.toJson(student);
resp.getWriter().write(s);
}
protected void getJsonAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("getJson请求过来了！");
Student student = new Student(1,"张三");
Gson gson = new Gson();
// json格式的字符串
String s = gson.toJson(student);
resp.getWriter().write(s);
}
protected void serialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("serialize请求过来了！");
System.out.println(req.getParameter("username"));
System.out.println(req.getParameter("password"));
Student student = new Student(1,"张三");
Gson gson = new Gson();
// json格式的字符串
String s = gson.toJson(student);
resp.getWriter().write(s);
}
}
958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
