ajax 无返回_JavaWeb 学友注册（ajax）

项目已上传码云：小朋友/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