如何使用javascript更改内容值？

我目前正在开发一个系统，用户只能查看带有起始字符的名称

下面是一个例子：

当我点击“A”链接时，下表将显示从“A”开始的名称，而不会显示其余记录

我试图使用href将操作传递给我的php，但这样做并不灵活。因此，我正在寻找javascript来帮助我完成这一过程。我想做的是，当我点击A~Z链接时，页面将不会刷新并直接更改内容

这是我的HTML代码：

<li><a href="alumni-listing.php?op=a">A</a></li>
<li><a href="alumni-listing.php?op=b">B</a></li>
<li><a href="alumni-listing.php?op=c">C</a></li>
<li><a href="alumni-listing.php?op=d">D</a></li>
<li><a href="alumni-listing.php?op=e">E</a></li>
<li><a href="alumni-listing.php?op=f">F</a></li>

这是我的SQL语句：

function getuser($record)
    {
        global $db;
        $arrResult = array();

        $stmt = "SELECT * FROM "._CONST_TBL_ALUMNI." WHERE name LIKE ".$record."%";

        if($rs = $db->Execute($stmt))
        {
            $arrResult = $rs->GetArray();           
        }           
        return $arrResult;
    }

希望有人能帮助我。

---

感谢您的高级支持。

无论如何，您必须使用对PHP页面的调用。

如果没有，则您可以在第一次调用时加载所有数据（a-Z），然后只需单击一下即可显示连接。但是，您的第一次呼叫将非常大，如果数据更大，则需要时间加载

您可以使用Ajax调用

按照这种方式构造HTML

<li><a href="#" class='ajaxCaller>A</a></li>
<li><a href="#" class='ajaxCaller>B</a></li>
<li><a href="#" class='ajaxCaller>C</a></li>
<li><a href="#" class='ajaxCaller>D</a></li>
<li><a href="#" class='ajaxCaller>E</a></li>
<li><a href="#" class='ajaxCaller>F</a></li>

---

因此，在我看来，您的问题归结为在Dom事件（即，通过javascript）上动态查询数据库，而不是导航到其他页面。这是幸运的，因为AJAX的开发基本上就是为了这个——更小的“刷新”

使用JS触发一个php请求，并解析返回值

查看jQuery的。我相信这可以在没有jQuery的情况下完成，所以如果jQuery是否定的，请编辑这个问题。如果您将php页面更改为只回显结果的JSON，并从JS调用if，您可以解析JSON并在html页面中显示它

HTML

Javascript

$('.listing-filter').click(function (e) {
  var $filter = $(e.currenttarget),
      filterValue = $filter.html();

  RefreshPageWithData(filterValue);
});

function RefreshPageWithData( filterBy ) {
 var data =  {
  op: filterBy,
 };
 $.post(pathname-on-server.php, data, function (response)  {
  //Parse the response
  var results = JSON.parse(response);

  //Construct the DOM
  var newHtml;

  //Append it to existing element
  $('#container').html(newHtml);
 });

---

请注意，php页面中的任何回显都是传递回JS回调的响应。因此，一个简单的想法可能是

echo json\u encode（$arresult）

。我建议使用一个index.php来像上面那样为文件提供服务，另一个执行类似的任务，但会回显检索到的数据。这避免了对主页的双服务器请求。

我已经做了很多类似于您要求的项目。学习使用jQuery和javascript框架将是解决该任务的最佳解决方案。jQuery使ajax过程非常简单

为每个div创建单独的div，将所有div的显示设置为“无”。单击特定链接集后显示：块到相应的div@shadow：我该怎么做才能返回我想要的值？我不太熟悉使用ajax。但是我有一个问题要问，在“data:{op:x}”这一行中是哪一个。此值是否从html页面传递？此外，在“function（）{}”中，我可以在其中编写的代码是sql语句或其他代码？此代码将调用PHP页面“alumberlisting.PHP”，并传递参数“op”。“op”的值为“A”、“B”，您每次单击该值时都会选择该值。然后该页面将执行sql语句并返回与该页面等价的HTML。这是客户端代码，这里不能有sql语句。好的，谢谢。我明白了。但是我怎样才能返回我想要的结果呢？此外，html没有传递值。因此，如何从html中获取值？我是否需要以html形式声明从html传递到ajax的变量，如“name='a'”？var x=$（this.text（）；将获取单击的标记的值。数据：{op:x}将通过参数opI am not clear和熟悉JQuery将该值传递给该url。你能给我一个示例代码吗？

  $('a.ajaxCaller').click(function(event){
     event.preventDefault();
     var x=$(this).text();
     $.ajax({
       url: "alumni-listing.php",
       data: {op:x}
       }).done(function() {
           // You can have your code to set the returned page, to the specific div.
      });
 });

$('.listing-filter').click(function (e) {
  var $filter = $(e.currenttarget),
      filterValue = $filter.html();

  RefreshPageWithData(filterValue);
});

function RefreshPageWithData( filterBy ) {
 var data =  {
  op: filterBy,
 };
 $.post(pathname-on-server.php, data, function (response)  {
  //Parse the response
  var results = JSON.parse(response);

  //Construct the DOM
  var newHtml;

  //Append it to existing element
  $('#container').html(newHtml);
 });