将javascript表单变量传递给jQuery函数不起作用答案

【问题标题】：Passing javascript form variables into jQuery function not working将javascript表单变量传递给jQuery函数不起作用
【发布时间】：2010-06-15 18:10:40
【问题描述】：

我正在尝试将一些已分配给表单变量的 JavaScript 变量传递到一个名为 fancybox 的 jQuery 插件使用的查询字符串中。如果我在字符串中硬编码我希望灯箱效果很好，但是我需要它在那里传递一些表单值以使其按需要工作。

<script type="text/javascript">
    $(document).ready(function(){

            var item = document.itemFinder.item;
            var zip = document.itemFinder.zip;
            var radius = document.itemFinder.radius;
            var dataString = "item=" + item + "&zip=" + zip + "&radius=" + radius;
            $("#various3").fancybox({
                    ajax : { type   : "POST", data  : dataString},
                    'scrolling'         : 'auto',
                    'overlayOpacity'    : '0'           
                    }               
                );
    });
    </script>

我做错了什么？

【问题讨论】：

你能打印出dataString吗？
以什么方式失败？是否有错误消息，或者只是没有显示数据？
document.itemFinder 交易是什么？
不，我无法打印出 dataString。 itemFinder 是我的表单的名称。没有押韵或失败的原因只是看不到传递给我的 php 脚本的数据，这些数据应该被打印出来，这意味着变量没有被正确传递。
在设置后尝试alert( dataString )。这将有助于回答。

标签： php javascript jquery forms fancybox

【解决方案1】：

data 参数需要一个对象。你正在传递一个字符串。像这样改变你的电话：

ajax : { type: "POST", data  : {'item': item, 'zip': zip, 'radius': radius}}

这应该让它为你正确地序列化你的值。

-- 更新了--

<script type="text/javascript">
  $(document).ready(function(){
     $('#someElement').change(function () {
        var item = document.itemFinder.item;
        var zip = document.itemFinder.zip;
        var radius = document.itemFinder.radius;
        var dataString = "item=" + item + "&zip=" + zip + "&radius=" + radius;
        $("#various3").fancybox({
                ajax : { type   : "POST", data  : dataString},
                'scrolling'         : 'auto',
                'overlayOpacity'    : '0'           
                }               
            );
  });
});
</script>

在我的示例中，我不确定您实际上想要绑定哪个事件（您的调用），并且我不确定还有哪些其他元素可用，但希望无论如何这都是有意义的。谢谢，

【讨论】：

实际上数据在这个函数的构建方式中调用了一个字符串。这是来自 fancybox 网站的示例。 $("#various3").fancybox({ ajax : { type : "POST", data : 'mydata=test' } });
有趣。我自己没有使用过 fancybox 插件，但是如果它构建在 jQuery 中现有的 AJAX 实现中，那么对象应该会自动序列化。如果他们以其他方式重新实现它，那么我的回答可能不正确。
理论上，你也可以这样做： var data = {'item': item, 'zip': zip, 'radius': radius}; var dataStr = $.serialize(data);然后你可以将 dataStr 传递给方法。
奇数。你有 Firebug 或其他一些可用的 JS 调试实用程序吗？如果是这样，您的控制台中有什么有意义的东西吗？
好吧，我想通了。发生的事情是在我选择它们之后，这些值没有被传递给函数。所以它从页面中获取初始的空白值而不是表单值。如果我选择了值，请使用仍然选择的值刷新页面，然后单击我的 ajax 函数链接。成功了。