pop服务器未响应,servlet测试控制台无反应啊??求大神帮忙,

本文通过实例展示了如何使用Ajax实现页面内容的异步加载,重点讲解了如何获取用户输入的关键字,发送请求并解析服务器返回的JSON数据,动态更新显示。基于Servlet的SearchServlet处理了关键字搜索,返回相关数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

#myDiv{

position:absolute;

left:50%;

top:50%;

margin-left: -220px;

margin-top: -50px;

}

var xmlHttp;

function getMoreContents(){

//1.获取文本框里的关键字

var content=document.getElementById("keyword");

if(content.value==""){

return;

}

//当输入的关键字不为空时,将其发送给服务器,我们使用ajax异步发送数据,

//需要获取XmlHttp这个对象

xmlHttp=createXmlHttp();

//alert(xmlHttp);

//发送数据给服务器

var url="search?keyword="+escape(content.value);

//和服务器建立连接

xmlHttp.open("GET",url,true);

//接收服务器给我们的响应 xmlHttp绑定回调函数

xmlHttp.onreadyStateChange=callback;

//获得数据之后,就可以动态的展示这些数据了,把这些数据展示到输入框的下面

}

//获取XmlHttp这个对象

function createXmlHttp(){

//在大多数浏览器的情况下

var xmlHttp;

if(window.XMLHttpRequest){

xmlHttp=new XMLHttpRequest();

}

//考虑浏览器兼容性问题

if(window.ActiveXObject){

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

if(!xmlHttp){

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

}

return xmlHttp;

}

//回调函数  作用是获取服务器响应过来的关联数据

function callback(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

//接收服务器传递给客户端的响应信息  文本格式

var result=xmlHttp.responseText;

//将其解析成json json本身也是一种文本格式两者之间有较小的区别

var json=eval("("+result+")");//(result)

}

}

}

//设置关联数据的展示,参数代表的是服务器传递过来的关联信息(json格式)

function setContent(contents){

//获取服务器传递过来的关联信息的长度 依次确定来生成多少个

var size=contents.length;

for(var i=0;i

var text=contents[i];//json数据的第i个元素值

var tr=document.createElement("tr");

var td=document.createElement("td");

td.setAttribute("border", "0");

td.setAttribute("bgcolor","#FFFAFA" );

//每行鼠标移上去都会变色 加个样式

this.className="mouseOver";

//每行鼠标移出去之后也会变色 加个样式

this.className="mouseOut";

//点击某行的信息时 会自动设置到输入框中

td.onclick=function(){

//这个方法实现的是 当鼠标点击一个关联的数据时,关联数据自动设置到输入框里

};

//创建文本节点

var textNode=document.createTextNode(text);

td.appendChild(textNode);

tr.appendChild(td);

document.getElementById("content_table_tbody").appendChild(tr);

}

}

ajax1
ajax2
ajax3

package com.imooc.servlet;

import java.io.IOException;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class SearchServlet extends HttpServlet {

//定义一个容器模拟数据库

staticList contents=new ArrayList();

static {

contents.add("ajax post");

contents.add("ajax get");

contents.add("ajax 对象");

contents.add("data");

contents.add("HmlHttp");

contents.add("ajax post");

contents.add("Jerry");

}

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

System.out.println("123");

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

//获取前台传过来的参数(keyword)

String keyword=request.getParameter("keyword");

//根据keyword查询关联信息

List datas=getData(keyword);

//将得到的关联信息转化成json数据格式

System.out.print(JSONArray.fromObject(datas));

}

public List getData(String keyword){

List datas=new ArrayList();

for(String data:contents){

if(data.contains(keyword)){

datas.add(data);

}

}

return datas;

}

}

xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

index.jsp

search

com.imooc.servlet.SearchServlet

search

/search

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值