Question

1）我正在尝试创建一个网络应用，允许用户通过关键字＆＃39;艺术家姓名＆＃39;来搜索YouTube视频。和歌曲名称＆＃39;。这些关键字是我要发送给SQL的HTML文本框值。（的index.php）

2）搜索通过javascript完成，捕获videoID（每个youtube链接末尾的11个字符）。我也希望将其插入到SQL数据库中。（app.js）

3）每个视频结果都有一个用于选择的按钮，一旦选择，相应的videoID将在php URL变量中捕获（在item.php中）。

4）获取艺术家姓名，歌曲名称和videoID后，我想将这些值发送到数据库（在insert.php中）。

如果删除SQL连接，我似乎只能激活Javascript搜索。如果我试图强制插入SQL，则Javascript搜索无法正常工作。

我已经读过其他堆栈，说javascript只能通过ajax连接到sql（在javascript中？）但是我已经尝试了多次没有它工作。我不确定是否必须下载ajax插件才能正常工作。基本上，我试图在不使用Ajax的情况下尝试这样做，但一直都失败了。

谢谢！

index.php

<!DOCTYPE html>
<html lang="en">
    <head>      
        <title>WesZone Karaoke Web App (Beta)</title>
        <meta charset="UTF-8" />                    
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="WesKaraoke" />
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">

    </head>
    <body>

        <header>
            <h1 class="w100 text-center"><a href="index.html">WesZone Karaoke Web App (Beta)</a></h1>
        </header>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form action="#" method="post">
                    <p><input type="text" id="namesearch" placeholder="Artist Name" autocomplete="off" class="form-control" name="artistName1" value="<?php echo isset($_POST['artistName1']) ? htmlspecialchars($_POST['artistName1']) : '' ?>"/></p>
                    <p><input type="text" id="songsearch" placeholder="Song Name" autocomplete="off" class="form-control" name="songName1" value="<?php echo isset($_POST['songName1']) ? htmlspecialchars($_POST['songName1']) : '' ?>"/></p>
                    <p><input type="submit" onclick="sendSQL()" value="Search" class="form-control btn btn-primary w100"></p>
                </form>





                <div id="results"></div>
            </div>
        </div>

        <!-- scripts -->
        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="js/app.js"></script>
        <script src="https://apis.google.com/js/client.js?onload=init"></script>
    </body>
</html>

app.js

function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res}



$(function() {
      $("form").on("submit", function(e) {
       e.preventDefault();




       // prepare the request



       var q = encodeURIComponent($("#namesearch").val().trim() + $("#songsearch").val().trim()+" lyrics").replace(/%20/g, "+");
       var request = gapi.client.youtube.search.list({
            part: "snippet",
            type: "video",
            q: q,
            maxResults: 20,
            videoCategoryId: 10,
            order: "viewCount",
       }); 
       // execute the request
       request.execute(function(response) {
          var results = response.result;
          $("#results").html("");
          $.each(results.items, function(index, item) {
            $.get("tpl/item.php", function(data) {
                $("#results").append(tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId}]));
            });
          });
          resetVideoHeight();
       });


    });

    $(window).on("resize", resetVideoHeight);


});


function sendSQL() {
    var artist = $('#artistName1').val().trim();
    var song = $('#songName1').val().trim();
    $.post('insert.php',{artistName1: artist, songName1: song},function(data) {
           alert(data);
           });
}

function resetVideoHeight() {
    $(".video").css("height", $("#results").width() * 9/16);
}

function init() {
    gapi.client.setApiKey("AIzaSyDUqm4rwYC3OctLm0jQi_m_4CTQ0U3I7lU");
    gapi.client.load("youtube", "v3", function() {
        // yt api is ready
    });
}

item.php

    <div class="item">
    <h2>{{title}}</h2>
    <iframe class="video w100" width="640" height="360" src="//www.youtube.com/embed/{{videoid}}" frameborder="0" allowfullscreen></iframe>

    <input type="hidden" id="vidID" value="{{videoid}}">


        <input type="button" value="Click Here" onclick='window.location="http://theweszone.com/index.php?id=" + "{{videoid}}"'>




</div>

insert.php

    <?php

$table = "songList";
$conn = mysql_connect("localhost", "karaoke","weszonekara");

if($conn == FALSE)
{
    echo 'Cannot connect to database' . mysql_error();
}
else
{
    echo 'Connected to database';
}

mysql_select_db("karaokeSong",$conn);

echo "<br>before posted names";
if(isset($_POST['songName'])&&isset($_POST['artistName'])){
    echo "<br>posted names";
}else{echo "<br> names not posted";}


$sql = "INSERT INTO `songList` (`artistName`,`songName`)  VALUES ('{$_POST['artistName1']}','{$_POST['songName1']}');";
//Run Query
$result = mysql_query($sql,$conn);
if (!$result($sql, $conn))
{
    die('Error: ' . mysql_error());
}
echo "1 record added";

mysql_close($conn);


parse_str($_SERVER['QUERY_STRING']);
echo $id;
echo $_SERVER['QUERY_STRING'];
echo '<p>Your song will be playing soon!!!!.</p>';


?>

将HTML文本框和Javascript值插入到phpmySQL＆＃39; onclick＆＃39; HTML按钮

0 个答案: