AJAX 自学练习 请求与显示

如下：
request.jsp


代码如下:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="javascript"><!--
function GetXmlHttpObject(){
    var xmlHttp = null;
    try{
        xmlHttp = new XMLHttpRequest();
    }catch(e){
        try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;

}
function showMsg(str){
    xmlHttp = GetXmlHttpObject();
    if(xmlHttp == null){
        alert ("you browser don't support the ajax");
         return;

}
    var url = "response.jsp";
    url = url + "?q="+ str;
    url = url + "&sid ="+ Math.random();
    xmlHttp.onreadystatechange = stateChanged;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}
function stateChanged()
{
    if(xmlHttp.readyState==4)
    {
        document.getElementById("city").value = xmlHttp.responseText;
    }
}
// --></script>
</head>
<body>
<form name="form1" action="" method="post">
    <label >City Code:</label>
    <input type="text" name="code" onblur = "showMsg(this.value)" />
    <br></br>
    <label>City Name:</label>
    <input type="text" name="city" id="city" ></input>
</form>
</body>
</html>

response.jsp


代码如下:

<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.lwf.eus.util.*,java.util.*,com.lwf.eus.entity.*,com.lwf.eus.bean.*" %>
<%
String code = request.getParameter("q");
System.out.println(code);
if(code.equals("140"))
    out.print("上海");
else if(code.equals("150"))
    out.print("北京");
else if(code.equals("160"))
    out.print("天津");
else
    out.print("未知地");
%>

这里要注意的是由于返回的结果要在文本框中显示，因此在response.jsp中没有<html>等标签，因为测试发现如果有这些标签的话，在cityname文本框中这些标签也会显示。

赞 (0)

相关推荐

  • AJAX 自学练习 请求与显示

    如下: request.jsp 复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3

  • 使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

    使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

    先给大家展示下运行效果图:  1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); int totalRows = blackList.size(); StringBuffer sb = new StringBuffer(); sb.append("{\"totalCount\":\""+to

  • jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery

  • AJAX跨域请求JSONP获取JSON数据的实例代码

    Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该方法

  • asp.net+ajax的Post请求实例

    本文实例讲述了asp.net+ajax的Post请求的实现方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: //一个ajax的Post请求       function submitInfo() {          $(".warn").hide(); //刚提交的时候隐藏错误的信息          var data = $("#formData").serialize(); //将表单的数据通过序列化表单值,创建 URL 编码文本字符串.形成一个表

  • 使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例

    使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例

    使用bootstrap-paginator.js 分页来进行ajax 异步分页请求 具体的做法如下 : 首先定义一个异步提交请求的ajax 函数,其完整的函数如下: var nid= $("#lbnid").val(); // 获取当前新闻编号 var cpage = 1; // 当前页面号 var tpage = 10; // 总页面数 function getPaging() { getComment(cpage); //获取新闻评论 } //点击查看新闻评论 $("#o

  • 快速解决ajax传递为空但显示在页面上为undefined的问题

    昨天写代码遇到一个问题,这个问题以前也遇到过,只不过那时以为简单就没做什么笔记,结果昨天遇到还是要去查百度,查百度又要找好一会儿,所以就记录一下.避免以后忘记. 首先问题是这样的:我用ajax到动态的做表格插入,从后台传回来一个对象的list集合,然后进行遍历动态的生成表格的行.后台写的都正确的,结果表格有些内容为显示为undefined.后来我调试了一下发现ajax自动的把为空的字段设成了undefined. //这是修改后的ajax代码 $("#ss").click(functio

  • vue使用ajax获取后台数据进行显示的示例

    实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/vue.min.js"></script> <script src="/vue-resource.min.js"&g

  • 四步轻松实现ajax发送异步请求

    ajax发送异步请求,供大家参考,具体内容如下 第一步(得到XMLHttpRequest) ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了ajax!!! 1.得到XMLHttpRequest 大多数浏览器都支持:var xmlHttp=new XMLHttpRequest(); IE6.0:var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); IE5.0以更早版本的IE:var xmlHttp=new A

  • 基于CORS实现WebApi Ajax 跨域请求解决方法

    概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各种APP万花齐放的今天,API的跨域请求是不能避免的. 在默认情况下,为了防止CSRF跨站的伪造攻击(或者是 javascript的同源策略(Same-Origin Policy)),一个网页从另外一个域获取数据时就会收到限制.有一些方法可以突破这个限制,那就是大家熟知的JSONP, 当然这只是众多

随机推荐