ajax 在 jsp中的应用

代码：

html代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="styles/base.css"/>
    <link rel="stylesheet" href="styles/public.css"/>
     <script src="js/spaqQuery.js"></script>
</head>
<body class="bg">

<div class="main w">
    <div class="title">食安查询</div>
    <div class="foodQuery clearfix">
        <div class="foodQuery-left fl"><img src="images/foodinsurance.png" alt="食品险"/></div>
        <div class="foodQuery-right fl">
            <ul class="query-con clearfix">
                <li class="marginr">
                    <label>保单号：</label>
                    <input type="text"  id="policyno"  value=""/>
                </li>
                <li>
                    <label>企业名称：</label>
                    <input type="text" id="company" value =""/>
                </li>
                <li><input class="query-btn" type="button" value="查询"  onclick="doSubmit()"/></li>
            </ul>
            <br>
            <br>
            <br>
            <br>
            <div class="query-result">
                <p id="queryResult">查询结果：<span>本公司在保障中、已通过食品安全检测、没有发生过理赔，获取食安险徽章</span></p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

js代码：

function doSubmit(){
    var strPolicyno = document.getElementById("policyno").value;
    var strCompany = document.getElementById("company").value;
    if(trim(strPolicyno)==""){
        alert("保单号不可为空");
    }
    if(trim(strCompany)==""){
        alert("企业名称不可为空");
    }
    validate(strPolicyno,strCompany);
}

function trim(str){ //删除左右两端的空格
    return str.replace(/(^\s*)|(\s*$)/g, "");
}

var xmlHttp; 
 
function createXMLHttpRequest() { 
    if(window.XMLHttpRequest) { 
        xmlHttp = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
} 
 
function validate(strPolicyno,strCompany) { 
    if (strPolicyno!="" && strCompany!="") { 
        //创建Ajax核心对象XMLHttpRequest 
        createXMLHttpRequest(); 
        var url = "spaqQueryAJAX.jsp?strPolicyno=" +strPolicyno + "&strCompany=" + strCompany; 
        //设置请求方式为GET，设置请求的URL，设置为异步提交 
        xmlHttp.open("GET", url, true); 
        //将方法地址复制给onreadystatechange属性 
        xmlHttp.onreadystatechange=callback; 
        //将设置信息发送到Ajax引擎 
        xmlHttp.send(null); 
    }
} 

//回调函数 
function callback() { 
    //Ajax引擎状态为成功 
    if (xmlHttp.readyState == 4) { 
        //HTTP协议状态为成功 
        if (xmlHttp.status == 200) { 
            if (trim(xmlHttp.responseText) != "") { 
                document.getElementById("queryResult").innerHTML = xmlHttp.responseText; 
            }else { 
                document.getElementById("queryResult").innerHTML = ""; 
            } 
        }else { 
            alert("请求失败，错误码=" + xmlHttp.status); 
        } 
    } 
}

jsp代码，直接out输出，ajax即可接收到返回数据

<%
    String strPolicyno =request.getParameter("strPolicyno");
    System.out.println(strPolicyno);
    out.print("查询成功");
%>

posted on 2016-10-12 11:27 黑鸟卫阅读(388) 评论(0) 编辑收藏举报