Question

我提前回答了一个问题

我的问题的答案之一是一个有效的代码片段。但是，当我试图在我的XAMPP设置上复制它时，它不起作用。

/* Get value from clicked li */
$(function() {

    let value = "";

    $('ul li').on("click", function() {

        value = $(this).text();
        console.log(value);
    });

    /* AJAX for send value into result.php page */

    $.post("result.php", {value: value}, function(res) {

        console.log(res); // return from result.php page 
    }); 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
<li>apple</li>
<li>orange</li>
<li>pear</li>
</ul>

带有result.php

if(isset($_POST['value']) && !empty($_POST['value'])) {

    echo $_POST['value'];
}

（注：这个原始答案是由Aman Kumar提交的。）

我只想了解：

此代码发生了什么，
这些代码应该在哪里（就HTML，PHP和Javascript文件而言）

Answer 1

代码是怎么回事？

简答（tl; dr）

您将显示列表
空字符串将发送至result.php
点击任何列表项（apple，orange，pear）将不执行任何操作（除了将您点击的内容分配到value变量并记录您点击的内容控制台）

答案很长

你似乎是（至少）JavaScript / jQuery / PHP的新手 - 所以我会尝试用尽可能多的参考资料来解决这个问题，这样你就可以自己深入研究。

您正在使用Javascript关键字let声明一个块作用域局部变量，并将其初始化为一个空字符串。

注意： let与var不同。要更多地了解两者之间的差异以及它们如何影响逻辑，请参阅block statement上的Mozilla文档

然后，在li ul（item in a list）的click（unordered list of items）中，您可以attaching an event handler function监控用户的点击次数$('ul li').on("click", function() {事件---

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

附加功能由jQuery提供，您使用脚本标记包含

<li>

点击后，您可以将项目的值（</li>和value内的字符串）分配给result.php变量。

您的$.post（jQuery简写）几乎将空字符串传递给$.post页面---因为无论您点击任何列表项的次数多少，result.php是不会触发---它只会触发一次，这是在页面加载...

如果您打算将用户点击的列表项的值传递给$.post，那么您必须将click置于$(function() { let value = ""; $('ul li').on("click", function() { value = $(this).text(); console.log(value); /* AJAX for send value into result.php page */ $.post("result.php", {value: value}, function(res) { console.log(res); // return from result.php page }); }); });事件的友好范围内，因此：

value

这样，每次用户点击任何列表项（result.php，apple，orange）时，都会触发pear向result.php的发送

最后，您的value基本上首先使用if语句检查两件事：

是否发布了$_POST['value'] != ''，如果是，

它不是空的（顺便说一下，你可以简单地做value）

而且，如果满足上述两个条件，它只会回复index.html

这些代码位应该在哪里？

简单回答：这实际上取决于。

如果你有一个简单/小（注意，这两个术语都是主观的！）然后将它们全部放在一个地方（即CSS个文件JavaScript和main.css）好的。

但是，如果您有冗长的（再次，主观！）代码，那么将其分解为各自的文件将是理想的。

一般经验法则我喜欢跟随自己：




如果代码难以导航（即滚动太多），那么我只需将其分解为自己的部分。 OR



如果我正在做一个快速的PoC（概念验证），那么我不在乎是否有一个文件



如果你做将代码分解为各自的片段，那么它看起来就像这样（再次，名称会有所不同......这只是一个例子）：

ul li { ... }

main.js

$(function() { let value = ""; $('ul li').on("click", function() { value = $(this).text(); console.log(value); /* AJAX for send value into result.php page */ $.post("result.php", {value: value}, function(res) { console.log(res); // return from result.php page }); }); });

index.html

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Awesome HTML Page</title> <meta name="description" content="My Awesome Project summary goes here... this will help Google/other search engines describe what this is all about!"> <meta name="author" content="Rushikumar"> <link rel="stylesheet" href="main.css"> <script src="main.js"></script> </head> <body> <ul> <li>apple</li> <li>orange</li> <li>pear</li> </ul> </body> </html>

result.php

最后，您的result.php片段很好......没有进一步的分解需求。但是，您的result.php文件应如下所示：

<?php if(isset($_POST['value']) && !empty($_POST['value'])) { echo $_POST['value']; } ?>

ssh-keygen -i -f publicKey.pem -m PKCS8 -i > pubkey-ssh.pub

Answer 2

您需要在点击处理程序

中移动ajax调用

$('ul li').on("click", function() {

  const value = $(this).text();

  /* AJAX for send value into result.php page */
  $.post("result.php", {
    value: value
  }, function(res) {
    console.log(res); // return from result.php page 
  });
});

我试图了解这个JavaScript代码发生了什么

2 个答案:

代码是怎么回事？

简答（tl; dr）

答案很长

这些代码位应该在哪里？