HTML在调用PHP函数后消失

huangapple
go评论123阅读模式
英文:

HTML disappearing after PHP function called

问题

这显示了按钮按下的结果。思路是它从文件中读取并写入，以便不同浏览器中的用户可以看到相同的结果。

最初我在访问DOM时遇到了一些问题，但后来发现，在第一次按钮按下后，我的PHP脚本下面的一切都被清除了，“在按钮点击后，这个区域不会显示”。

简单的解决方法是将DOM元素简单地移动到更高的位置，但是...我想知道...

为什么这个区域会被删除？就好像它被当作PHP一样对待。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. // 背景循环
  5. function updateChat() {
  6.     var file = 'word.txt?v=' + Date.now();
  7.     var rawFile = new XMLHttpRequest();
  8.     rawFile.open("GET", file, false);
  9.     rawFile.onreadystatechange = function () {
  10.         if (rawFile.readyState === 4) {
  11.             if (rawFile.status === 200 || rawFile.status == 0) {
  12.                 var allText = rawFile.responseText;
  13.                 console.log(allText);
  14.                 document.getElementById("shownword").innerHTML = allText;
  15.             }
  16.         }
  17.     }
  18.     rawFile.send(null);
  19.     setTimeout(updateChat, 500);
  20. }
  22. <!-- language: lang-html -->
  23. <!DOCTYPE html>
  24. <html lang="en">
  26. <head>
  27.     <meta charset="UTF-8">
  28.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  29.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  31.     <title>Random Word Generator</title>
  33.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  34.     <script type="text/javascript"></script>
  35.     <script language="javascript" src="update.js" type="text/javascript"></script>
  36. </head>
  38. <body onload="updateChat();">
  40.     <p id="shownword"></p>
  42.     <form action="" method="post">
  43.         <input type="submit" name="word" class="button" value="Button1" id="button1" />
  44.         <input type="submit" name="word" class="button" value="Button2" id="button2" />
  45.     </form>
  47.     <?php
  48.     // 当按钮被按下时，将调用此函数
  49.     function postword(){
  50.         $fp = fopen('word.txt', 'w');
  51.         fwrite($fp, $_POST['word']);
  52.         fclose($fp);
  53.     }
  54.     // 当按钮被按下时，将调用函数
  55.     if (isset($_POST['word'])) {
  56.         postword();
  57.         return;
  58.     }
  59.     ?>
  61.     This area doesn't get shown after button click
  63. </body>
  64. </html>
  66. <!-- end snippet -->

这是您提供的代码的翻译部分。

英文:

This displays the result of a button press. The idea is that it reads and writes from a file so that users in different browsers can see the same result.

I had some issues accessing the DOM originally but then discovered that after the first button press, everything below my php script is wiped This area doesn&#39;t get shown after button click

The easy workaround is to simply move the DOM element higher up but... I want to know...

Why is this area getting deleted? It's as if it's being treated like PHP.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. //Background Loop
  2. function updateChat(){
  3. var file = &#39;word.txt?v=&#39; + Date.now() ;
  4. var rawFile = new XMLHttpRequest();
  5. rawFile.open(&quot;GET&quot;, file, false);
  6. rawFile.onreadystatechange = function ()
  7. {
  8. if(rawFile.readyState === 4)
  9. {
  10. if(rawFile.status === 200 || rawFile.status == 0)
  11. {
  12. var allText = rawFile.responseText;
  13. console.log(allText);
  14. document.getElementById(&quot;shownword&quot;).innerHTML = allText;
  15. }
  16. }
  17. }
  18. rawFile.send(null);
  19. setTimeout(updateChat, 500);
  20. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
  7. &lt;title&gt;Random Word Generator&lt;/title&gt;
  8. &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js&quot;&gt;&lt;/script&gt;
  9. &lt;script type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  10. &lt;script language=&quot;javascript&quot; src=&quot;update.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  11. &lt;/head&gt;
  12. &lt;body onload=&quot;updateChat();&quot;&gt;
  13. &lt;p id=shownword&gt;&lt;/p&gt;
  14. &lt;form action=&quot;&quot; method=&quot;post&quot;&gt;
  15. &lt;input type=&quot;submit&quot; name=&quot;word&quot;
  16. class=&quot;button&quot; value=&quot;Button1&quot; id=&quot;button1&quot;/&gt; 
  17. &lt;input type=&quot;submit&quot; name=&quot;word&quot;
  18. class=&quot;button&quot; value=&quot;Button2&quot; id=&quot;button2&quot;/&gt; 
  19. &lt;/form&gt;
  20. &lt;?php
  21. //This function gets called when button is pushed
  22. function postword(){
  23. $fp = fopen(&#39;word.txt&#39;, &#39;w&#39;);
  24. fwrite($fp, $_POST[&#39;word&#39;]);
  25. fclose($fp);
  26. }
  27. //When the button is pushed, the function will be called
  28. if (isset($_POST[&#39;word&#39;])) {
  29. postword();
  30. return;
  31. }
  32. ?&gt;
  33. This area doesn&#39;t get shown after button click
  34. &lt;/body&gt;
  35. &lt;/html&gt;

<!-- end snippet -->

答案1

得分: 1

只删除"return;"。

  1. if(isset($_POST['word'])) {
  2.   postword();
  3.   // return;
  4. }
英文:

Just remove the "return;"

  1. if(isset($_POST[&#39;word&#39;])) {
  2. postword();
  3. // return;
  4. }

huangapple
  • 本文由 发表于 2020年1月3日 17:03:19
  • 转载请务必保留本文链接：https://go.coder-hub.com/59575678.html
  • html
  • javascript
  • php
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定