php - 如何让小书签弹出一个表单，将 URL 和标题提交给数据库以及评论

Question

我实现了一个小书签，当点击时将 URL 和标题发送到数据库。我希望首先弹出一个表单，其中包含一个用于添加评论的字段、一个用于编辑页面标题的字段以及一个用于选择从数据库表中填充的类别的下拉字段。

我仍在学习 PHP，几乎没有任何 JS 技能。我不知道如何让小书签调用将提交给数据库的弹出表单或将页面 URL 和标题传递给表单。

到目前为止我使用的代码来自这里 -> http://tutorialzine.com/2010/04/simple-bookmarking-app-php-javascript-mysql/

书签代码:

(function () {
  var jsScript = document.createElement('script');
  jsScript.setAttribute('type', 'text/javascript');
  jsScript.setAttribute('src', '/bookmark.php?url=' + encodeURIComponent(location.href)
  + '&title=' + encodeURIComponent(document.title));

document.getElementsByTagName('head')[0].appendChild(jsScript);

})();

Bookmark.php代码:

// Error reporting:
error_reporting(E_ALL^E_NOTICE);

require "connect.php";
require "functions.php";

// Setting the content-type header to javascript:
header('Content-type: application/javascript');

// Validating the input data
if(empty($_GET['url']) || empty($_GET['title']) || !validateURL($_GET['url'])) die();

// Sanitizing the variables
$_GET['url'] = sanitize($_GET['url']);
$_GET['title'] = sanitize($_GET['title']);

// Inserting, notice the use of the hash field and the md5 function:
mysql_query("   INSERT INTO bookmark_app (hash,url,title)
                VALUES (
                    '".md5($_GET['url'])."',
                    '".$_GET['url']."',
                    '".$_GET['title']."'
                )");

$message = '';
if(mysql_affected_rows($link)!=1)
{
    $message = 'This URL already exists in the database!';
}
else
$message = 'The URL was shared!';


?>

/* JavaScript Code */

function displayMessage(str)
{
    // Using pure JavaScript to create and style a div element

    var d = document.createElement('div');

    with(d.style)
    {
        // Applying styles:

        position='fixed';
        width = '350px';
        height = '20px';
        top = '50%';
        left = '50%';
        margin = '-30px 0 0 -195px';
        backgroundColor = '#f7f7f7';
        border = '1px solid #ccc';
        color = '#777';
        padding = '20px';
        fontSize = '18px';
        fontFamily = '"Myriad Pro",Arial,Helvetica,sans-serif';
        textAlign = 'center';
        zIndex = 100000;

        textShadow = '1px 1px 0 white';

        MozBorderRadius = "12px";
        webkitBorderRadius = "12px";
        borderRadius = "12px";

        MozBoxShadow = '0 0 6px #ccc';
        webkitBoxShadow = '0 0 6px #ccc';
        boxShadow = '0 0 6px #ccc';
    }

    d.setAttribute('onclick','document.body.removeChild(this)');

    // Adding the message passed to the function as text:
    d.appendChild(document.createTextNode(str));

    // Appending the div to document
    document.body.appendChild(d);

    // The message will auto-hide in 3 seconds:

    setTimeout(function(){
        try{
            document.body.removeChild(d);
        }   catch(error){}
    },3000);
}

<?php 

// Adding a line that will call the JavaScript function:
echo 'displayMessage("'.$message.'");';

?>

函数.php

<?php

/* Helper functions */

function validateURL($str)
{
    return preg_match('/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:\/~\+#]*[\w\-\@?^=%&amp;\/~\+#])?/i',$str);
}

function sanitize($str)
{
    if(ini_get('magic_quotes_gpc'))
        $str = stripslashes($str);

    $str = strip_tags($str);
    $str = trim($str);
    $str = htmlspecialchars($str);
    $str = mysql_real_escape_string($str);

    return $str;
}


function relativeTime($dt,$precision=2)
{
    if(is_string($dt)) $dt = strtotime($dt);

    $times=array(   365*24*60*60    => "year",
                    30*24*60*60     => "month",
                    7*24*60*60      => "week",
                    24*60*60        => "day",
                    60*60           => "hour",
                    60              => "minute",
                    1               => "second");

    $passed=time()-$dt;

    if($passed<5)
    {
        $output='less than 5 seconds ago';
    }
    else
    {
        $output=array();
        $exit=0;

        foreach($times as $period=>$name)
        {
            if($exit>=$precision || ($exit>0 && $period<60)) break;

            $result = floor($passed/$period);
            if($result>0)
            {
                $output[]=$result.' '.$name.($result==1?'':'s');
                $passed-=$result*$period;
                $exit++;
            }
            else if($exit>0) $exit++;
        }

        $output=implode(' and ',$output).' ago';
    }

    return $output;
}

// Defining fallback functions for mb_substr and 
// mb_strlen if the mb extension is not installed:

if(!function_exists('mb_substr'))
{
    function mb_substr($str,$start,$length,$encoding)
    {
        return substr($str,$start,$length);
    }
}

if(!function_exists('mb_strlen'))
{
    function mb_strlen($str,$encoding)
    {
        return strlen($str);
    }
}
?>

我想要的最终结果是类似于 Bitly 书签的东西，https://bitly.com/a/tools ，但我只需要帮助将 Bookmarklet 链接到提交到数据库的弹出表单。

我试过环顾其他人的问题，但我找不到任何适用于使用弹出表单提交给数据库的问题。

Answer 1

您可以在书签(javascript)中附加 HTML 表单。

var HTML = '<form action=""><input type="text" name="title" /></form>';
document.appendChild(HTML);


这不是完整的代码，只是可以帮助您完成工作的原理示例。