您好我正在努力制作一个在线电视节目跟踪器前端实现就像这样http://tiii.me/ 1
您输入一个节目名称，背景图像会发生变化，小图片会像上面给出的网站一样向下显示，请参考。
我面临的问题是我有一个servlet被调用，一旦按下按钮就被调用，因此从页面重定向，一旦我从servlet重定向，html页面上完成的所有计算都消失了。
这是我搜索的html
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<style>
body{
background-color: #ffffff;
}
#custom-search-input {
margin:0;
margin-top: 10px;
padding: 0;
}
#custom-search-input .search-query {
padding-right: 3px;
padding-right: 4px \9;
padding-left: 3px;
padding-left: 4px \9;
/* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#custom-search-input button {
border: 0;
background: none;
/** belows styles are working good */
padding: 2px 5px;
margin-top: 2px;
position: relative;
left: -28px;
/* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color:#D9230F;
}
.search-query:focus + button {
z-index: 3;
}
.bg
{
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background-image: url(images/126.42.jpg);
background-size: cover;
background-position: 50% 0;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
filter: blur(3px);
filter: alpha(Opacity=10);
opacity: .6;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
</style>
<script>
var val;
function myFunction()
{
val = document.getElementById("tvshow").value;
var i=0;
var data = {results: []};
var imurl;
$.ajax ({
type: "GET",
url: 'http://api.trakt.tv/search/shows.json/58269f85e4333c18234bb68b93397031/'+ val +'/5/seasons/',
dataType: "jsonp",
json: "callbackname",
crossDomain : true,
success: function (result) {
$.each(result, function (i, show) {
// write everything in an array
data.results.push({id: this.tvdb_id, text: this.title, runtime: this.runtime, poster: this.images.poster, bg: this.images.fanart});
console.log(this.title);
//selectedTVshow = this.title;
// results = data.results;
// return array
if(i==0)
{
imurl=this.images.fanart;
i++;
}
$('.bg').css('background-image','url('+ imurl +')');
//imurl=this.images.fanart;
})
},
error: function (data) {
console.log('error');
}
})
}
</script>
<title>T.V Dose</title>
<div class="container">
<div class="row">
<span class="bg"></span>
<form action="http://localhost:8080/TVDose/addshow" method="POST" class="form form-signup" role="form">
<span class="input-group-btn" style="float:right;">
<button class="btn btn-default" onclick="myFunction()" type="submit">
<span class=" glyphicon glyphicon-plus-sign" style="font-size: 2.0em"></span>
</button>
</span>
<div id="custom-search-input" style="margin-top: 30%">
<div class="input-group col-md-12">
<input type="text" id="tvshow" class="search-query form-control" placeholder="Type in a show" name="show"/>
</div>
</div>
</form>
</div>
以下是正在使用的Servlet Post方法正确使用注释
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
HttpSession newSession=request.getSession(false);
if(newSession==null)
{
//response.sendRedirect("http://localhost:8080/Jotter2/");
}
else
{
String showname = request.getParameter("show");
Document sid = Jsoup.connect("http://services.tvrage.com/feeds/search.php?show="+showname+"&exact=1").timeout(1000*100).get();
Elements show_id=sid.select("showid");
String shwname=show_id.first().text();
System.out.print(shwname);
//System.out.print(sid);
String sname=sid.select("name").first().text();
Shows temp= new Shows();
int id=Integer.parseInt(shwname);
temp.setShow_id(id);
temp.setTitle(sname);
Login usr = (Login)newSession.getAttribute("user");
temp.setPid(usr.getPid());
DataAccessUtil.save(temp);
Document doc = Jsoup.connect("http://services.tvrage.com/feeds/episode_list.php?sid="+id+"").get();
System.out.print(doc);
Elements ep_name=doc.select("title");
Elements air_date=doc.select("airdate");
int count=ep_name.size();
Episodes[] ep_temp=new Episodes[count];
int i=0;
while(i<count)
{
ep_temp[i]=new Episodes();
i++;
}
int a=0;
String date_air;
SimpleDateFormat dt1 = new SimpleDateFormat("yyyy-MM-dd");
while(a<count)
{
ep_temp[a].setEp_name(ep_name.get(a).text());
ep_temp[a].setPid(usr.getPid());
ep_temp[a].setS_id(temp.getSid());
date_air=air_date.get(a).text();
Date date = null;
try {
date = dt1.parse(date_air);
} catch (ParseException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
java.sql.Date sqlDate = new java.sql.Date(date.getTime());
ep_temp[a].setAir_date(sqlDate);
DataAccessUtil.save(ep_temp[a]);
a++;
}
}
答案 0 :(得分：0)
由于您使用的是ajax，因此不应在<form/>提交时刷新。您应该在myFunction()
function myFunction() {
.................
return false;
}