Question

如何将加载到页面（DOM）的php文件中的变量传递给jQuery函数？

我在网上搜索时尝试了各种方法，但我还没弄清楚如何正确使用它们。

我需要将var navHeaderTitle传递给jQuery load（）回调函数，以便将HTML标记#navHeaderTitle设置为php文件中调用的变量。

Thnx为你提供帮助。

PHP：

<?php
$con = mysql_connect("localhost","user","pw");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("db", $con);
$result = mysql_query("SELECT * FROM some_list");

$navHeaderTitle = "MY NEW TITLE";//<--I NEED 2 INJECT THIS!!

while($row = mysql_fetch_array($result))
{
echo "<div id='navItem' title='$navHeaderTitle'>";
echo "<h1>" . $row['label'] . "</h1>";
echo "<h2>" . $row['title'] . "</h2>";
echo "<p>" . $row['description'] . "</p>";
echo "</div>";
}
mysql_close($con);
?>

HTML头中的JavaScript：

<script type="text/javascript">

    var navHeaderTitle = '';

    $(document).ready(  
        function() {
            $("#navContent").load('http://url/my_list.php', function() {
            $('#navHeaderTitle').text($(html).find('div#navItem').attr('title'));//<--GET THE VAR FROM LOADED PHP FILE!!
            }); 
        });
</script>
<body>
<div id="navPanel">

            <div id="navHeader">
                <img src="images/ic_return.png" style="float: left;"/>
                <img  id="listSortBtn" src="images/ic_list_sort.png" style="float: right;"/>
                <h4 id="navHeaderTitle"></h4>//THIS IS WHAT NEEDS THE VAR DATA!!
            </div>

            <div id="navScrollContainer" class="navContentPosition">
                <div id="navContent">HTML CONTENT from PHP GETS DUMPED IN HERE</div>
            </div>

        </div>
</body>

我尝试过使用此功能但不确定如何：

$.get('scripts/my_list.php', {}, function(data){ 
                   data = split(':'); 
                })

Answer 1

我希望php文件返回一个json对象，其中包含两个部分，即要回显的html和要使用的标题。

然后我会使用jQuery的.ajax()函数而不是.load()来从javascript变量中获取php脚本的返回值，而不是像.load()那样直接转储它。

Answer 2

用

替换echo("$navHeaderTitle");

echo("<script> var navHeaderTitle = $navHeaderTitle </script>");

并从var navHeaderTitle = '';脚本中删除<head> ..

将设置一个像您正在使用的JS变量，但是必须在<head>中的代码加载之前执行此操作...

修改

确定不要echo("$navHeaderTitle");你可以把它放到HTML中：

echo "<div id='navItem' title='$navHeaderTitle'>";

然后在JS中你可以做到：

<script type="text/javascript"> var navHeaderTitle = ''; $(document).ready( function() { $("#navContent").load('http://url/my_list.php', function(response) { $('#navHeaderTitle').text($(response).attr('title')); }); }); </script>

这是一个jsfiddle演示：http://jsfiddle.net/JKirchartz/hdBzF/（它使用小提琴的/echo/html/所以加载有一些额外的东西来模仿ajax）

Answer 3

在自定义属性（data-var）中传递var会更加清晰，然后获取它的宽度JQuery

$(some_element).attr("data-var");

我讨厌用PHP搞乱我的JS代码。

将php var传递给jQuery函数

3 个答案: