0

我有一个 jquery 代码，它为我显示可折叠，当我将代码放入 html5 时它可以工作，但我需要该代码来自 php 页面并显示在 html5 的 div 中，但它不起作用，here是我放在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>
4

1 回答 1

0

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

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

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

...在页面加载时立即执行。由于此时没有带有 idaccordion的元素，所以什么也没有发生（检查你的控制台——可能有错误）。

然后，您onchange在 input 元素上有代码，它使用非 jQuery ajax 向您的 php 文件发送请求。php 文件生成一些 html，用 id 包装在一个 div 中accordion，并将其添加到页面中。该元素从未应用过与手风琴相关的 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 注入。我们在这里看不到该代码，因此请将此视为标准免责声明：永远不要相信用户输入！

文档

于 2013-09-09T18:29:54.440 回答