javascript - 将 SQL 添加到名为 'onclick' 的函数

Question

我有一个名为“添加”的按钮，它与列表中的每个人相关。

  echo <td><input type=\"submit\" id=\"PlayerAdded".$id."\" value=\"Add\" 
  onclick=\"add('".$id."','".$name."','".$_SESSION['GameID']."');\"></input></td>";

单击“添加”时，我想将人员详细信息添加到表中(工作正常)，并将包括他们的姓名和 ID 的新行添加到我的数据库中的表中(这是我的问题)。

我知道 PHP 不能在 JS 函数中工作。我还知道，由于安全问题，我永远不应该从 JS 访问我网站上的数据库。

那么我怎样才能拥有一个 onclick 调用添加到数据库的函数的按钮呢？

我尝试用 PHP 编写我的函数，但当我单击按钮时它没有执行任何操作。请参阅下面的函数:

function add(id,name,game){
    var t = ("</td><td>");
    var str = ("<tr id='Players" + id + "'><td>")
    var ctr = ("</td></tr>")

    var PID = ("<input type = 'hidden' name='ID" + id + "' value='" + id + "'></input>" + id)
    var Pnam = ("<input type='hidden' name='Name" + id + "' value='" +  name + "'></input>");
    var place = ("<select name='Place" + id + "'><option value='17'>17th</option><option value='16'>16th</option><option value='15'>15th</option><option value='14'>14th</option><option value='13'>13th</option><option value='12'>12th</option><option value='11'>11th</option><option value='10'>10th</option><option value='9'>9th</option><option value='8'>8th</option><option value='7'>7th</option><option value='6'>6th</option><option value='5'>5th</option><option value='4'>4th</option><option value='3'>3rd</option><option value='2'>2nd</option><option value='1'>1st</option></select>")
    var points = ("<form action='leaderboards.php' method='post' target='_blank'><input type='hidden' name='playerid' value='" + id + "'></input><input type='hidden' name='name' value='" + name + "'></input><input type='submit' value='View'></form>");
    var cash = ("$<input name='Cash" + id + "' placeholder=' 0'></input>");
    var ticket = ("<select name='Ticket" + id + "'><option value='No'>No</option><option value='Yes'>Yes</option>");
    var del = ("<input type='button' value='Delete' onclick='remove(" + id + ")'> </input>")

   $('#PlayerAdded').before(str+ PID + t + Pnam + name + t + place + t + points + t + cash + t + ticket + t + del + ctr);

// This is where I want to insert into the db. Similar to 
      // <?php
      // $sql = "INSERT INTO results (`col`, `col2`, `col3`) VALUES ('$id', '$name', '$game')"; 
      // mysqli_query($dbcon,$sql); ?>
//but I want to be able to do it inside this java script function.

  }

Answer 1

删除变量前的括号，这是您为函数中的每个变量编写的。

在函数代码的末尾添加 ajax 部分。

function add(id, name, game) {
    var t = "</td><td>";
    var str = "<tr id='Players" + id + "'><td>"
    var ctr = "</td></tr>"

    var PID = "<input type = 'hidden' name='ID" + id + "' value='" + id + "'></input>" + id;
    var Pnam = "<input type='hidden' name='Name" + id + "' value='" + name + "'></input>";
    var place = "<select name='Place" + id + "'><option value='17'>17th</option><option value='16'>16th</option><option value='15'>15th</option><option value='14'>14th</option><option value='13'>13th</option><option value='12'>12th</option><option value='11'>11th</option><option value='10'>10th</option><option value='9'>9th</option><option value='8'>8th</option><option value='7'>7th</option><option value='6'>6th</option><option value='5'>5th</option><option value='4'>4th</option><option value='3'>3rd</option><option value='2'>2nd</option><option value='1'>1st</option></select>";
    var points = "<form action='leaderboards.php' method='post' target='_blank'><input type='hidden' name='playerid' value='" + id + "'></input><input type='hidden' name='name' value='" + name + "'></input><input type='submit' value='View'></form>";
    var cash = "$<input name='Cash" + id + "' placeholder=' 0'></input>";
    var ticket = "<select name='Ticket" + id + "'><option value='No'>No</option><option value='Yes'>Yes</option>";
    var del = "<input type='button' value='Delete' onclick='remove(" + id + ")'> </input>";

    $('#PlayerAdded').before(str + PID + t + Pnam + name + t + place + t + points + t + cash + t + ticket + t + del + ctr);

    // making ajax call to insert.php and posting the data
    $.ajax({
        method: "POST",
        url: "insert.php",
        data: {
            "id": id,
            "name": name,
            "game": game
        },
         beforeSend:function(){
            // show something before data is saved to db.
         }
    }).done(function(msg) {
        $("body").append(msg); //debugging purpose
    }).fail(function( jqXHR, textStatus ) {
        alert( "Request failed: " + textStatus );
    });
}

insert.php

<?php
   if(isset($_POST['id']) && isset($_POST['name']) && isset($_POST['game'])){
      $id= $_POST['id'];
      $name= $_POST['name'];
      $game= $_POST['game'];   

    //write your connection logic

    // never write bare queries there is a chance of sql injection.
    //Instead use prepared statement, prepare your query then bind the above values to it, then excute. 
    //write your insert logic below.
}
?>