Ajax
Ajax
验证用户名是否注册，提交text，返回text
//接收客户端表单提交的数据
String ajaxAccount = request.getParameter("ajaxAccount"); // 获取ajax传递的data
if (ajaxAccount != null) {
try {
Student student = service.selectOne(ajaxAccount);
if (student == null) {
response.getWriter().println("恭喜，该用户名可以注册!"); //返回字符串
} else {
response.getWriter().println("用户名已被注册!");//返回字符串
}
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return;
}
// 验证用户名是否注册
$.ajax({
type: 'post', //设置提交方式
data: {'ajaxAccount': $('#inputAccount').val()}, //设置提交的数据
dataType: 'text', //设置返回的数据类型
url: '/register', //设置提交的地址
success: function (data) { // 成功操作
$('#inputAccount').parent().parent().next().text(data);
},
error: function (res) { //失败操作
$('#inputAccount').parent().parent().next().text(res.responseText);
}
});不提交，返回json；需要序列化
@WebServlet(name = "ajaxSelect",urlPatterns = "/select")
public class ajaxSelect extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=UTF-8");
StudentService service = new StudentServiceImpl();
try {
// 获取登录时的session，用户名
String login = String.valueOf(request.getSession().getAttribute("login"));
// 查询信息，返回对象
Student student = service.selectOne(login);
Gson gson = new Gson();
// 对象序列化为json字符串
String stuToJson = gson.toJson(student);
System.out.println(stuToJson);
// 响应给客户端
response.getWriter().println(stuToJson);
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
$.ajax({
type: 'post',
dataType: 'json',
url: '/select',
success: function (data) {
$('#data').text(data.account);
},
error: function (resopnse) {
document.write(resopnse.responseText);
}
});提交json，返回json；需要序列化，反序列化
@WebServlet(name = "ajaxAdd", urlPatterns = "/ajaxAdd")
public class ajaxAdd extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=UTF-8");
//获取json字符串
String jsonData = request.getParameter("json");
Gson gson = new Gson();
// 反序列化为对象
Student student = gson.fromJson(jsonData, Student.class);
StudentService service = new StudentServiceImpl();
try {
Integer insertFlag = service.insertStudent(student);
// 设置插入状态，拼接json字符串
String resJson = "";
if (insertFlag > 0) {
resJson = "{\"status\":" + insertFlag + ",\"value\":\"添加成功!\"}";
} else {
resJson = "{\"status\":" + insertFlag + ",\"value\":\"添加失败!\"}";
}
// 响应给客户端
response.getWriter().println(resJson);
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
// 异步提交注册
$('#ajaxSub').click(function () {
if (flagAcc == false || flagPwd == false) {
return false;
}
let inputAccount = $('#inputAccount').val();
let inputPassword = $('#inputPassword').val();
let sex = $('input[name="sex"]:checked').val();
let educ = $('select[name="educ"]').val();
let happy = $('input[name="happy"]:checked');
let happys = "";
$.each(happy, function (index, obj) {
happys += $(obj).val();
happys += ",";
})
happys = happys.substring(0, happys.lastIndexOf(","));
let jsonData = "{'account':'" + inputAccount + "','pwd':'" + inputPassword + "','sex':'" + sex + "','educ':'" + educ + "','happy':'" + happys + "'}";
$.ajax({
type: 'post',
data: {'json': jsonData},
dataType: 'json',
url: '/ajaxAdd',
success: function (data) {
alert(data.value);
location = '/login.jsp';
},
error: function (res) {
document.write(res.responseText);
}
})
});- 展示数据
/*
查询所有用户
*/
@WebServlet(name = "ajaxSelectAll",urlPatterns = "/selectAll")
public class ajaxSelectAll extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=UTF-8");
try {
StudentService service = new StudentServiceImpl();
List<Student> students = service.selectAll();
Gson gson = new Gson();
String strJson = gson.toJson(students);
response.getWriter().println(strJson);
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
$.ajax({
type: 'post',
data: {},
dataType: 'json',
url: '/selectAll',
success: function (dataStuList) {
$('#ajaxTable tbody').empty();
$.each(dataStuList, function (index, obj) {
let $tr = $('<tr></tr>');
$tr.append($('<td>' + obj.account + '</td>'));
$tr.append($('<td>' + obj.sex + '</td>'));
$tr.append($('<td>' + obj.educ + '</td>'));
$tr.append($('<td>' + obj.happy + '</td>'));
$tr.append($('<td><a href="javascript:;" name="del">删除</a></td>'));
$('#ajaxTable tbody').append($tr);
});
$("a[name='del']").on('click', function () {
if (!confirm('确定要删除吗？')) {
return false;
}
let delAcc = $(this).parent().parent().children().eq(0).text();
$.ajax({
type: 'post',
data: {'delAcc': delAcc},
dataType: 'json',
url: '/ajaxDel',
success: function (data) {
alert(data.value);
},
error: function (res) {
document.write(res.responseText);
}
});
$(this).parent().parent().remove();
});
},
error: function (res) {
$('#ajaxTable').after(res.responseText);
}
});ajax异步加载js失效问题
https://www.cnblogs.com/qlqwjy/p/7670472.html
贡献者
更新日志
2026/4/5 03:39
查看所有更新日志
fb8bc-于