今日主要实现了web页面顶部搜索的功能,可以搜索电影与演员:

主要是通过给按钮添加点击事件,然后获取input的值,传给后台来实现

var head_btn=document.getElementById("search_head_btn");
    head_btn.onclick=function (){
        var head_input=document.getElementById("search_head").value;
        window.open("/head_for_html"+"?title_star="+head_input,'_blank')
    }
@app.route('/head_for_html')
def head_for_html():
    title_star=request.values.get("title_star")
    return render_template("search_head.html",title_star=title_star)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/show.css">
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <link rel="stylesheet" href="../static/css/table.css" type="text/css" />
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/jquery-1.7.2.min.js"></script>
</head>
<body>
    <div id="header">
        <!--电影logo
        <div class="logo">
            <img src=".\img\logo.png" height="100px" width="100px" />
        </div>
        -->
        <div class="title"><h1 id="title">树懒电影</h1></div>
        <div class="container">
            <form action="#" class="parent">
                <input type="text" class="search" placeholder="电影名称,主演" id="search_head">
                <button id="search_head_btn">搜索</button>
            </form>
        </div>
        <div class="mycenter"><input class="myhead" type="button" value="" id="head_picture"></div>
        <!--头像超链接到个人信息页面-->
        <script>
        var head_picture=document.getElementById("head_picture")
         head_picture.onclick=function(){
            window.open("/user_pager",'_blank')
         }
        </script>
    </div>
    <div id="main">
        <div class="cat"></div>
        <div class="content">
            <ul style="width: 100%;margin-left:300px; list-style: none" class="ul_show">
            </ul>
        </div>
    </div>
    <div id="title_star" d="{{title_star}}" style="display:none"></div>
    <script>
         var title_star= document.getElementById('title_star').getAttribute('d');
         $.ajax({
             url: "/query_head",
             data: {
                 title_star:title_star
             },
             success: function (data) {
                 $(".ul_show").empty()
                 if(data.data==""){
                     alert("暂无数据!")
                 }else{
                     for (var i = 0; i < data.data.length; i++) {
                         a="/movie_page?"+"title="+data.data[i][0]+"&scorenum="+data.data[i][7];
                         appendUlBody ="<li> <p class='picture'>"
                             +"<img src="+"'"+data.data[i][8]+"'"+" height='200px' width='140px' referrer='no-referrer'/></p>"
                             +"<p class='instroction'>"
                             +'<a href="'+a+'" style="text-decoration:none;" target="_blank" >'
                             +data.data[i][0]+"</a><br><br>导演: "+leave_out(data.data[i][2])+"<br>主演: "+leave_out(data.data[i][1])+"<br>"
                             +data.data[i][4]+"/"+data.data[i][5]+"<br>"+data.data[i][6]+"<br>"+data.data[i][3]+"分<br>"+data.data[i][7]+"人评价</p></li>"
                         $(".ul_show").append(appendUlBody);
                     }
                 }
             },
             error: function (xhr, type, errorThrown) {
             }
         })
         function leave_out(str){
            if(str.length>=20)
            {
                str=str.substring(0,20)+"..."
            }
            return str
        }
    </script>
</body>
</html>