Question

我正在尝试从管理门户更新新闻页面。我正在尝试用 PHP 来做到这一点，但到目前为止我还没有多少运气。我了解 html、CSS 和 JavaScript，但没有使用 PHP 的经验（这可能是我挣扎的原因）。由于我缺乏经验，我正在使用教程。我正在尝试结合这两个指南：CRUD in HTML, JavaScript, and jQuery（动态添加行部分）和 Change content of a div on another page。我的管理员门户通常由我的 .HTaccess 中的密码保护，但我暂时禁用了它（在我接受答案之前它将保持这种状态）。目标是在使用 JavaScript 的方式将数据发送到 PHP 编译它，然后使用 JavaScript 从第二页调用它

您可以查看管理门户 here 和主要新闻页面 here

如果我的代码永远无法运行，我将不胜感激我的问题的替代解决方案！ :)

代码

index2.html

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>News- Gavin Guitars</title>
        <link rel="stylesheet" href="stylenews14.css">
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
        <script src="newsscript.js"></script>
    </head>
    <body>
        <div class="row">
            <div class="nav">
                <ul>
                    <li><a href="Home">Home</a></li>
                    <li><a class="active" href="#news">News</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
            </div>
            <div class="top">
                <h1 class="title"><br/>News</h1>
            </div>
            <div class="leftcolumn"></div>
            <div class="mid">
                <div class="card">
                    <h3 class="ptitle">Update</h3>
                    <h3 class="pdate ">Feb 12, 2021<br/><br/></h3>
                    <h4 class="ptext">currently in development! :)</h4>
                </div>
            </div>
            <div class="rightcolumn"></div>
        </div>
        <div class="bottem"></div>
    </body>
</html>
<!--
    <div class="card">
        <h3 class="ptitle"> title </h3>
        <h3 class="pdate"> date <br/><br/></h3>
        <h4 class="ptext"> text </h4>
    </div>
-->

stylenews14.css（不是很重要）

/* CSS reset */
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
     margin:0;
     padding:0;
}
 html, body {
     margin: 0;
     padding: 0;
}
 body {
     font-family: 'Roboto', sans-serif;
     font-weight: 100;
}
 fieldset {
     border: 1px solid white;
     color: white;
     text-align: center;
     width: 200px;
}
 legend {
     padding: 0 10px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 6;
}

.nav li {
  float: left;
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}
.nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  position: relative;
  z-index: 6;
}

.nav li a:hover {
  background-color: #111;
}
.active {
  background-color: #4CAF50;
}
/* CSS reset */
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
     margin:0;
     padding:0;
}
 html, body {
     margin: 0;
     padding: 0;
}
 body {
     font-family: 'Roboto', sans-serif;
     font-weight: 100;
}
 fieldset {
     border: 1px solid white;
     color: white;
     text-align: center;
     width: 200px;
}
 legend {
     padding: 0 10px;
}
* {
  box-sizing: border-box;
}
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
.top .title {
  bottom: -12px;
  font-size: 50px;
}
.top {
  padding: 20px;
  text-align: center;
  background: white;
  width: 100%;
}
.leftcolumn {
  float: right;
  width: 12.5%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
.mid {   
  float: left;
  width: 75%;
}
.rightcolumn {
  float: left;
  width: 12.5%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
.card .pdate {
    justify-self: right;
}
.card .ptitle {
    justify-self: center;
}
.card .ptext {
    justify-self: auto
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 0%;
    padding: 0;
    background-color: white;
  }
  .mid {
    width: 100%;
    padding: 0
  }
}
@media screen and (max-width: 400px) {
  .nav a {
    float: none;
    width: 100%;
  }
}
/* CSS reset */
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
     margin:0;
     padding:0;
}
 html, body {
     margin: 0;
     padding: 0;
}
 body {
     font-family: 'Roboto', sans-serif;
     font-weight: 100;
}
 fieldset {
     border: 1px solid white;
     color: white;
     text-align: center;
     width: 200px;
}
 legend {
     padding: 0 10px;
}

newsscript.js

setInterval(search_after_info, 1000);


function search_after_info() {

    $.get('get_data', function(data) {

        $("#mid").html(data);

    });

}

新闻.php

<?php

if (isset($_POST['new-info'])) {


}


?>

index3.html

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Admin Portal</title>
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
        <script src="adminscript.js"></script>
    </head>
    <body>
        <h1>Admin Portal</h1>
        <h2>if u hacker, plz leave :)</h2>
        <h3>update news</h3>
        <form>
            <textarea id='ptitle new-info'></textarea>
            <textarea id='pdate new-info'></textarea>
            <textarea id='ptext new-info'></textarea>
            <input type='submit' id='submit-info' value='pass'/>
        </form>
    </body>
</html>
<!--
    <div class="card">
        <h3 class="ptitle"> title </h3>
        <h3 class="pdate"> date <br/><br/></h3>
        <h4 class="ptext"> text </h4>
    </div>
-->

adminscript.js

$("form").submit(function(e){

    e.preventDefault();

    $.post('/home/vol6_8/epizy.com/epiz_27830982/htdocs/news.php', { new_info:$("#new-info").append("\n" + "<div class='card'>" + "\n" + "  " + "<h3 class='ptitle'> " + $("#ptitle").val() + " </h3>" + "\n" + "   " + "<h3 class='pdate'> " + $("#pdate").val() + " <br/><br/></h3>" + "\n" + "   " + "<h4 class='ptext'> " + $("#ptext").val() + " </h4>" + "\n" + "</div>")}).done(function(data){
        $("#ptitle").val("");
        $("#pdate").val("");
        $("#ptext").val("");
    });


});

从管理门户更新网站新闻页面

代码

0 个答案: