从db onclick传递参数，在JS中设置变量，并通过ajax将变量传递给php函数

Question

我早些时候发布了一个问题，但是由于我的代码错误，因此无法正常工作。 就像标题所说的那样，我正在从数据库中提取一些数据并在div中回显它们。 单击后，我要获取此数据并将其传递到javascript文件，设置变量并将这些变量发送到php文件以插入数据库中。 我想做所有这些事情，因此页面不会刷新。 这是我的div：

echo "<div><a href='javascript:void(0);' onClick='wish(".$title.", ".$link."); 
return false;'>Add to Wish List</a></div>";

标题和链接是从数据库中提取的数据。 JS脚本：

$(function() {
function wish(title, link){
var title = //how to set this to the title passed??
    var link = //how to set this to the link passed??
}
$.ajax({
  type: "POST",
  url: "wish_list.php",
  data: title and link //what's the correct syntax to pass these two vars???
  success: function(){
    alert("Item added to your wish list");
}
});
});

在PHP wish_list.php文件中，我将使用：

if (isset($_POST['title']) && isset($_POST['link'])){
   echo"<script>
     alert("variables passed");
   </script>";
}

那我离我有多远？ 我想念的是什么还是全部错了？

Answer 1

距离很近，但是您只需要决定要使用哪种数据格式，如果您想使用JSON，则可以在PHP中使用json_encode和json_decode ，在JavaScript中使用JSON.stringify和jQuery.parseJSON 。

将变量传递给PHP并从PHP获取JSON

PHP：

$url = json_decode($_POST['url']); // You have a php array of the details now
var_dump($url);

JS：

var url = { 
    title: 'Home Page', 
    link: location.href
};

jQuery.ajax({
    type: 'POST',
    url: "wish_list.php",
    data: JSON.stringify(url),
    dataType: "json",
    success: function(data){ console.log(data); }
});

将变量从PHP传递到JavaScript

以下内容受到了Drupal的启发。 在包含jQuery之后但包含其他脚本之前，请包含以下内容：

<script>
  var Globals = { 'settings': {}, 'somethingelse': {} };
  jQuery.extend(Globals.settings, {'phpVersion':'<?php print phpversion() ?>', link:'http://www.google.com', title:'Google'});
</script>

然后，您可以在JavaScript中读取和写入设置：

// Add this device's window width
jQuery.extend(Globals.settings, {'deviceWidth':$(window).width()});

// Now print everything Global.settings has including the variable set by PHP
console.dir(Global.settings);

// Or get a specific variable:
console.log('This server is running PHP ' + Globals.settings.phpVersion);

Answer 2

您已经在使用jquery，因此首先让我们清理html：

echo "<div><a class=\"wishable\" href=\"#\" data-wishlist-title=\"$title\" data-wishlist-link=\"$link\">Add to Wish List</a></div>"

我从html中删除了所有js。 如果您使用jQuery，则没有真正的理由将功能内联到html。 为了访问数据，我们希望将其编码为data属性，可以使用jQuery.attr或jQuery.data进行访问。 我还添加了wishable的类，以便我们可以将单击处理程序附加到所有链接。

因此，我们不应该挂钩您拥有的旧内联函数：

$(function() {
    $(document).on('click.wishable', 'a.wishable', function (e) {
         var $this = $(this), // the <a />
             title = $this.data('whishlistTitle'), // pull the title from the data attr
             link = $this.data('wishlistLink');  // pull the link from the data attribute

         e.preventDefault(); // prevent default link handling

         $.ajax({
           type: "POST",
           url: "wish_list.php",
           data: {"title": title, "link": link },
           success: function(){
             alert("Item added to your wish list");
           }
         });         
    });
});

现在我们如何获得链接和标题：

title = $this.data('whishlistTitle')
link = $this.data('wishlistLink')

当将jQuery.data与数据属性一起使用jQuery.data ，属性名称会进行转换。 删除data-前缀，然后将其余部分从连字符转换为camelCase。 另外，该值将转换为本地javascript类型。 对于没有实际数字的数字字符串，这确实是很重要的（例如0填充产品SKU），但是对于您的示例而言，这无关紧要。 但是，这确实使data比attr慢。

我们也可以改用jQuery.attr但需要使用完整的属性名称：

title = $this.attr('data-whishlist-title')
link = $this.attr('data-wishlist-link')

这是一个小提琴： http : //jsfiddle.net/hyFXM/1/

对于测试，您可以仅回显您传递的内容并发出警报。 因此jQuery.ajax看起来像：

         $.ajax({
           type: "POST",
           url: "wish_list.php",
           data: {"title": title, "link": link },
           success: function(text){
             alert(text);
           }
         });

然后，您的php将如下所示：

if (isset($_POST['title']) && isset($_POST['link'])){
   echo 'SUCCESS - $_POST[\'title\'] =' . $_POST['title'] . ' $_POST[\'link\'] = '. $_POST['link'];
} else {
   echo 'FAIL WHALE!!!!!!';
}