Question

我有一个jquery代码，为我显示可折叠，当我把代码放在html5它工作，但我需要该代码来自一个PHP页面并显示在html5中的div，但它不工作，这里是我放在php + sql连接和jquerys文件的代码.....

echo"<div data-role='collapsible'>";

while($row=mysqli_fetch_array($result))
{

  echo " <h4>" .$row['Nom']. "</h4>";
  echo " <p>" .$row['Nom']. "</p>";

}
echo"</div>";

但它只是在我的div中显示了两行行......

添加：

这是我的php文件：

<?php
$host     = "localhost";
$port     = number;
$socket   = "";
$user     = "root";
$password = "";
$dbname   = "database name";
$value =$_GET['value'];

$con = new mysqli($host, $user, $password, $dbname, $port, $socket);
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }

mysqli_select_db($con,"ajax_demo");
$sql="request";


$result = mysqli_query($con,$sql);

  echo'<div id="accordion">';

while($row=mysqli_fetch_array($result))
{

echo"  <h3>test</h3>
  <div>
    <p>test </p>
  </div>";

}
 echo" </div>";

echo"</div>";
mysqli_close($con);

?>

和html5文件是：

<!DOCTYPE html>

<head> 
   <LINK rel="stylesheet" type="text/css" href="style.css">

   <script src="log.js" charset="ISO-8859-1"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title> r&eacute;clamation Interne </title>
  <script>

  $(function() {
    $( "#accordion" ).accordion();
  });


function showUser(str)
{
var x=document.getElementById('matr');
var str = x.value;
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","http://IP/File name/test.php?q="+str,true);
xmlhttp.send();
}
</script>      
</head>
<body>
</div>
  <div class="login">

   <center><h1>Datas  </h1></center>

   <div id="landmark-1" data-landmark-id="1">   
  <div> 

 <center> 
 <form name="data" >

<input type="text"  id="matr" onchange="showUser()" >
</form></center>
</div>
<br>
<center>
<div id="txtHint"><b>Click here to show data</b></div></center>
  </div>

  <div class="login-help">
  </div>
</body>
</html>

Answer 1

您正在尝试在尚不存在的元素上初始化jQuery插件。我认为理解出了什么问题很重要，所以你可以在将来避免这个问题，因为这是你正在使用的一种非常常见的模式。

我们将从这一位开始查看您的代码...

  $(function() {
    $( "#accordion" ).accordion();
  });

...当页面加载时立即执行。由于此时没有id accordion的元素，所以没有任何反应（检查你的控制台 - 可能有错误）。

然后，你在input元素上有onchange代码，它使用非jQuery ajax将请求发送到你的php文件。 php文件生成一些html，包含在id为accordion的div中，并将其添加到页面中。该元素从未与手风琴相关的javascript应用于它，因此没有任何功能。

你有一些正确的概念，但你的时机错了。首先，让我们使用jQuery ajax方法来简化代码。此外，由于您已经花费了性能/加载时间来在项目中包含jQuery，因此您应该充分利用这些功能并使用实用程序元素选择器：

新的javascript

(function ($) {
    // used to keep a reference to the ajax request object
    var searchQuery = false;

    var showUser = function (str) {
        if (searchQuery != false) // if there is a pending request, cancel it
            searchQuery.abort();

        var searchTerm = $('#matr').val();
        if (searchTerm .trim().length < 1) {
            $("#txtHint").html('');
            return;
        }

        // clean up the old accordion
        if ($("#accordion").length > 0)
            $("#accordion").accordion('destroy');
        $("#txtHint").html('seaching...');

        searchQuery = $.ajax({
            'url':'http://IP/file_name/test.php?q='+searchTerm,
            'success':function (response) {
                searchQuery = false;
                $('#txtHint').html(response);
                $('#accordion').accordion();
            },
            'error': function () {
                searchQuery = false;
                $('#txtHint').html('Sorry, there was an error');
            }
        });
    };

    // add the change event to the text field, once the page loads
    $(document).ready(function () {
        $('#matr').change(showUser);
    });
})(jQuery);

HTML

HTML所需的唯一更改是从输入中删除内联onClick事件。也就是说，您使用center来居中文本，这不是一个好习惯。请改用css text-align:center; - 标签越少越好（一般来说）。

PHP

此处无需更改，但请确保您正确处理从$_GET获得的用户输入。如果您没有正确使用它，单独使用mysqli_*不能防止SQL注入。我们在这里没有看到该代码，因此请将此视为标准免责声明：绝不信任用户输入！

<强>文档

jQuery.ajax - http://api.jquery.com/jQuery.ajax/
jQuery UI Accordion小部件 - http://jqueryui.com/accordion/

php中的jquery可折叠主题不起作用

1 个答案: