从 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

您已经在使用 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。为了访问我们想要的数据，我将其编码为数据属性，可以使用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 与数据属性一起使用时，属性名称会发生​​转换。 data- 前缀被删除，然后其余部分从连字符转换为驼峰式。此外，该值将被转换为原生 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!!!!!!';
}

Answer 2

你很接近，但你只需要决定使用什么数据格式，如果你想使用 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 的做法。包含此 after 您包含 jQuery，但 before 您包含其他脚本：

<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);