ajax 異步請求代碼

時間 2019-11-30
標籤 ajax 異步請求代碼欄目 Ajax 简体版
原文原文鏈接
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    request.setAttribute("path", request.getContextPath());
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="${path }/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("[name='name']").blur(
            function(){
            //獲取文本框輸入的內容
            var name=$("#name").val();
            //2.使用ajax發送用戶名  select * from student where name=?若是存在提示用戶名被佔用
                $.ajax({
                    type:"get",//提交方式
                    data:{name:name},//查詢的參數
                    url:"${path}/dorm?method=ajaxname",//提交的路徑
                    dataType:"text",//返回的類型  是Text文本
                    success:function(result){
                    if(result==0) {
                        $("#msg").html("用戶名不可使用");
                    }else{
                        $("#msg").html("用戶名可使用");
                    }
                }
            })
        })
    })
    function getdormid() {
        var id=$("#id").val();
        $.get("${path}/dorm?method=JSONDormList",{id:id},function(data){
            var str="";
            $.each(data, function(i, obj) {
                if(obj.remaining_number!=0){
                    str += "<option value="+obj.id+">" + obj.code + "</option>";
                }
            });
            $("#dorm").html(str);
        }, "json");
        
    }
</script>
</head>
<body>
<form action="" method="post">
    <table align="center">
        <tr align="center">
            <td colspan="8"><h2>宿舍管理</h2>
            <td>
        </tr>
        <tr>
            <td>姓名:</td><td><input type="text" name="name" id="name"><span id="msg"></span></td>
        </tr>
        <tr>
            <td>年齡:</td><td><input type="text" name="age"></td>
        </tr>
        <tr>
            <td>性別:</td><td><input type="radio" name="sex" value="0" checked="checked">男
                            <input type="radio" name="sex" value="1">女</td>
        </tr>
        <tr>
            <td>地址:</td><td><input type="text" name="address"></td>
        </tr>
        <tr>
            <td>電話:</td><td><input type="tel" name="tel"></td>
        </tr>
        <tr>
            <td>宿舍編號:</td><td>
            <select name="id" id="id" onchange="getdormid()">
                <option value="11">請選擇</option> 
                <option value="0">男</option> 
                <option value="1">女</option> 
            </select>
            <select name="dorm" id="dorm" >
                <option></option> 
            </select>
        </tr>
    <tr><td><input type="submit" value="添加"></td></tr>
    </table>
</form>
</body>
</html>



----------------------------------------------------------------------------------------
//異步請求 查詢  用戶名是否存在
    private void getStudenName(HttpServletRequest request, HttpServletResponse response) {
        // 獲取參數
        String name = request.getParameter("name");
        // 調用方法
        Student stu = studentService.ajaxname(name);
        System.out.println(stu);
        if (stu != null) {
            // 若是對象不是null的 說明姓名已經佔用
            try {
                response.getWriter().print(0);
            } catch (IOException e) {
                e.printStackTrace();
            }
        } else {
            try {
                response.getWriter().print(1);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

    }

----------------------------------------------------------------------------------------
    // 查詢宿舍集合  傳入id  二級聯動
    private void getJSONDormList(HttpServletRequest request, HttpServletResponse response) {
        //調用方法
        String id= request.getParameter("id");
        List<Dorms> dormList=studentService.getJSONDormList(id);
        System.out.println(dormList.size()+"成都");
        Object jsonList = JSON.toJSON(dormList);
        PrintWriter out;
        try {
            out = response.getWriter();
            out.print(jsonList);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }