Question

我实现了一个bookmarklet，点击后会将URL和Title发送给DB。我希望首先弹出一个表单，其中包含一个用于添加注释的字段，一个用于编辑页面标题的字段，以及一个用于选择从DB表中填充的类别的下拉字段。

我还在学习PHP几乎没有任何JS技能。我不知道如何让bookmarklet调用将提交给数据库的pop表单或将页面URL和Title传递给表单。

我到目前为止使用的代码是从这里开始的 - ＆gt; http://tutorialzine.com/2010/04/simple-bookmarking-app-php-javascript-mysql/

Bookmarklet Code：

(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.'");';

?>

的functions.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 bookmarklet，https://bitly.com/a/tools，但我只需要帮助将Bookmarklet链接到提交给db的弹出窗体。

我已经尝试过查看其他人的问题，但是我找不到任何适用于使用弹出窗体提交给数据库的问题。

Answer 1

您可以在书签（javascript）中附加HTML表单。

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

这不是一个完整的代码，只是一个可以帮助你完成工作的原则的例子。

如何让bookmarklet弹出一个表单，提交URL和标题到DB加注释

1 个答案: