项目已上传码云:小朋友/JavaWeb 学友注册(AJAX)
知乎视频www.zhihu.com项目介绍:项目结构和之前发的所差无几,这里只做了一个页面,就是注册页面。
实现功能:被占用的用户名有提示,采用 AJAX
动态无刷新;其次,输入的学校的输入框有智能提示(就像百度的时候那样,输入内容就会触发 AJAX
向后端发起请求并查询数据库,采用 MySQL
模糊查询) ;最后,下拉选项框级联实现数据库查询(首先,省份使用立即执行函数执行 AJAX
请求,并获取到省份信息渲染到省份下拉框),根据所选省份进行查询市级信息。
使用技术:JavaWeb、AJAX、JQuery
代码实现1(展示前端部分)-以学校提示为例:
// 学校输入提示
$('#school').on('input', function () {
let school = $(this).val();
var aim = $('.school-recommend');
if (school == "") {
aim.css({
'display': 'none'
})
return;
}
$.ajax({
type: 'POST',
url: '/AlumniRegistration/reg/recommendschool',
data: {
'school': school
},
success: function (res) {
var arr = res.school;
aim.html('');
if (res.school.length == 0) {
aim.css({
'display': 'none'
});
return;
}
aim.css({
'display': 'block'
});
var str = (function () {
var str = "";
for (let a in arr) {
str += `<li>${arr[a]}</li>`;
}
return str;
})();
aim.html(str);
}
})
});
// 对学校选择进行绑定-事件委托
$('.school-recommend').on('click', 'li', function () {
var school = $(this).text();
$('#school').val(school);
$('.school-recommend').css({
'display': 'none'
})
});
代码实现2(展示后端部分)-以学校提示为例:
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
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 com.sanery.service.UserService;
import com.sanery.service.impl.UserServiceImpl;
@WebServlet("/reg/recommendschool")
public class RecommendSchool extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String school = request.getParameter("school");
// 查询数据库看用户名是否已存在
UserService u = new UserServiceImpl();
List<String> list = u.recommendSchool(school);
String json = "";
for (String sc : list) {
json = json + """ + sc + "",";
}
if (json.length() > 0) {
json = json.substring(0, json.length() - 1);
}
// 返回数据
response.setContentType("application/json;charset=UTF-8");
PrintWriter out = response.getWriter(); // 输出文字
try {
out.print("{"school":[" + json + "]}");
} finally {
out.flush();
out.close();
}
}
}
更多请自行到 Gitee 下载项目
CSDN:https://blog.csdn.net/weixin_43148062
简书:https://www.jianshu.com/u/45339cbb7573