javascript - 多页面环境下的PHP和JS

标签 javascript php jquery ajax

对于这篇文章有点长，我提前表示歉意。我已经尝试解决这个问题有一段时间了，但没有成功，所以我想发布我的大部分代码，以便帮助我的出色人员可以更好地了解我在做什么。这是在我的上一篇文章中向我建议的 - Cannot get .js to be called upon form POST - 我创建了一个新线程

我有一个项目，其中所有代码都发生在单个页面上，html、php、javascript 和一堆 SQL 查询。我正在尝试摆脱这种情况，使用单独的页面，并将 AJAX 合并到其中，这样我就可以更新数据库(该页面的核心)，而无需刷新。

我有两个主要页面 - test.php 和 getuser.php，以及两个较小的页面，update.php 和 <强>update.js。

test.php 是我首先加载的页面。它被分成两部分<div> s，顶部 div 包含对数据库的 SQL 查询以选择用户，底部 div 在从下拉菜单中选择用户后启动脚本 showUser()，并向 getuser 发送 AJAX 请求。 php 加载下面页面的其余部分。

测试.php

<?php session_start(); ?>
<!doctype html>

<html>

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/bootstrapstyle.css">
    <link rel="stylesheet" href="/toastr.css">
    <script type="text/javascript" src="/toastr.js"></script>
    <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <style type="text/css">
      body {
        padding-top: 50px;
        padding-bottom: 20px;
      }
    </style>
  <script type="text/javascript" src="/update.js"></script>

  <script>
    function showUser(str) {
      if (str !==".PM") {
        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","getuser.php?q="+str,true);
      xmlhttp.send();
    }
</script>
</head>
<body>

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="home.php">HOME</a>
        </div>
        <div class="navbar-collapse collapse">
          <form>
          <ul class="nav navbar-nav">

            <li>
              <a>
                <?php
                include('./db.php');
                $PM = mysqli_query($con, "SELECT DISTINCT PMName FROM report WHERE PMname <> '' ORDER BY PMName ASC");
                ?>
                <span class="custom-dropdown custom-dropdown--red">
                <select class="navbar-inverse" placeholder="PM Name" name="PMName" onchange="showUser(this.value)">
                <?php
                while ($row = mysqli_fetch_row($PM)) {
                $selected = array_key_exists('PMName', $_POST) && $_POST['PMName'] == $row[0] ? ' selected' : '';
                printf(" <option value='%s' %s>%s</option>\n", $row[0], $selected, $row[0]);
                }
                ?>
                </select>
                </span>
              </a>
            </li>
          </ul>
          </form>
        </div>
      </div>
    </div>

<div id="txtHint"><b>Select a name from the dropdown menu above...</b></div>

</body>
</html>

getuser.php

    <?php session_start(); ?>
    <!doctype html>
    <html>     
      <head>        
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link rel="stylesheet" href="/bootstrapstyle.css">    
        <link rel="stylesheet" href="/toastr.css">    
        <script type="text/javascript" src="/toastr.js"></script>             
        <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>     
        <style type="text/css">      body {         padding-top: 50px;         padding-bottom: 20px;       }     
        </style>  
        <script type="text/javascript" src="/update.js"></script>     
      </head>     
      <body>

    <?php
    $q = $_GET['q'];
    include('./db.php');
    $LimitStart = 0 ;
    $LimitItems = 10 ;
    //THIS IS THE SQL COMMAND THAT ACTUALLY GRABS THE CORRECT PM
    $sqlPM= "SELECT * FROM report WHERE PMName = '".$q."' and REGNSB <> 0.000 ORDER BY TrackNumber ASC Limit $LimitStart,$LimitItems";
    $result     = mysqli_query($con, $sqlPM);
    // THIS IS FOR THE PAGE COUNT TOTAL OF THAT SPECIFIC PM
    $sqlCommand = "SELECT COUNT(*) FROM report where PMName = '".$q."' AND REGNSB <> 0.000";
    $query = mysqli_query($con, $sqlCommand) or die(mysqli_error());
    $pages      = mysqli_fetch_row($query);
    $totalPages = round($pages[0] / 10);
    mysqli_free_result($query);

    if (isset($_POST['previous'])) {                  
        $postedLimit = (isset($_POST['previous']) ? (int) $_POST['previous'] : 0);
        $prevLimit = 1;
        $_SESSION['page'] = ((int) $nextLimit / 10)+1;
        $result = mysqli_query($con, "SELECT * FROM report WHERE PMName = '$PMSelection' AND REGNSB <> 0.000 ORDER BY TrackNumber ASC Limit $LimitStart,$LimitItems");
    }

    if (isset($_POST['next'])) {
            $postedLimit = (isset($_POST['next']) ? (int) $_POST['next'] : 0);
            $nextLimit = $postedLimit + 10;
              $_SESSION['page'] = ((int) $nextLimit / 10)+1;

            $result = mysqli_query($con, "SELECT * FROM report WHERE PMName = '$PMSelection' AND REGNSB <> 0.000 ORDER BY TrackNumber ASC, RegNSB DESC Limit $nextLimit,$LimitItems");
        }

    if (isset($_SESSION['page'])) {
    } else {
    $_SESSION['page'] = 1 ;
    }        
    ?>

    <!-- MAIN JUMBOTRON THAT LISTS THE TITLE OF THE PAGE AS WELL AS THE PAGE 1 OF X THING... -->
    <div class="jumbotron">
    <div class="container">
      <h1 class="pull-left">DW1 Invoice-Backlog Report</h1>
      <h2 class="pull-right"><?= $q ?></h2>
    </div>
    <div class="container">
        <div class="test">
            <div class="inner">
                <form method="POST" action="">
                Page&nbsp;<?= $_SESSION['page'] ?>&nbsp;of&nbsp;<?= $totalPages ?>&nbsp;&nbsp;:&nbsp;&nbsp; 
                <input class="button" type="submit" name="previous" value="START" onclick="this.value=<?php echo $prevLimit; ?>">  
                <input class="button" type="submit" name="next" value="NEXT" onclick="this.value=<?php echo $nextLimit; ?>"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </form>
            </div>
        </div>
    </div>      
    <div class="container pull-right">                         
    </div>
    </div>

    <div class="container">
    <div class="row">
      <div class="col-xs-6 col-sm-3 col-lg-12">       
        <form id="updateChanges" method="POST" action="update.php">
          <div class="container pull-right">
            <h2 class="pull-left">
              <input class="button" name="update"<?= $LineID ?>" type="submit" id="update" value="UPDATE">            
            </h2>
          </div>

    <div id="tableRefresh">
    <table id="box-table-a">  
<tr>
<th>
 ..all my headers..........
</th>
</tr>
<?php
while ($row = mysqli_fetch_array($result)) {

    $LineID             = $row['LineID'];
    $trackNumber        = $row['TrackNumber'];
    $PMName             = $row['PMName'];
    $RegNSB             = number_format($row['RegNSB'], 0);
    $TrackCount         = $row['TrackCount'];
    $TrackNSB           = number_format($row['TrackNSB'], 0);
    $TotalBacklog       = number_format($row['TotalBacklog'], 0);
    $AverageBacklog     = number_format($row['AverageBacklogTrackMargin'] * 100, 2);
    $RGPPercent         = number_format($row['RGPPercent'] * 100, 2);
    $PMComments         = $row['PMComments'];
    $PMMRecommendations = $row['PMMRecommendations'];
    $Outcome            = $row['Outcome'];
    $NewGPPercent       = $row['NewGPPercent'];
    $AdditionalGP       = $row['AdditionalGP'];
    $PMM                = $row['PMM'];
    $NEDA               = $row['NEDA'];
    $InvoiceNumber      = $row['InvoiceNumber'];
    $InvCustEB          = $row['InvCustEB'];

      ?>

<tr>
<td>
....all my rows...
</td>
</tr>
<?php
}
?>

update.js 和 update.php 文件:

$(function() {

    // Get the form.
    var form = $('#updateChanges');

    // Set up an event listener for the contact form.
    form.submit(function(event) {

    // Stop the browser from submitting the form.
    event.preventDefault();

    // Serialize the form data.
    var formData = form.serialize();

    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: form.attr('action'),
        data: formData
    });
});
});

和

<?php

include('./db.php');

$data       = array();    //array to pass back the sum of PM Comments, PM Recs, Outcomes... etc....

for ($n = 0, $t = count($_POST['PMComments']); $n < $t; $n++) {
    $UpdateValue             = $_POST['Update'][$n];
    $PMCommentsValue         = $_POST['PMComments'][$n];
    $PMMRecommendationsValue = $_POST['PMMRecommendations'][$n];
    $OutcomeValue            = $_POST['Outcome'][$n];
    $NewGPPercentValue       = $_POST['NewGPPercent'][$n];
    $AdditionalGPValue       = $_POST['AdditionalGP'][$n];
    $LineID                  = $_POST['LineID'][$n];

    $sqlUPDATE = "UPDATE report SET PMComments = '$PMCommentsValue' , PMMRecommendations = '$PMMRecommendationsValue' , Outcome = '$OutcomeValue' , NewGPPercent = '$NewGPPercentValue', AdditionalGP = '$AdditionalGPValue'  WHERE LineID = $LineID ;";
?>
<div id="alerts">
<?php    
    echo $sqlUPDATE . "<br>";  //this echos back the entire SQL entry that will be made
?>
</div>
<?php    
    $doUPDATE = mysqli_query($con, $sqlUPDATE);
    if (!$doUPDATE) {
        die('Could not update data: ' . mysqli_error($con));
    }

    if ($OutcomeValue <> 'null') {                  

      $sqlMOVE  = "INSERT INTO results SELECT * FROM report WHERE LineID = $LineID ;" ;
      $sqlDELETE = "DELETE FROM report where LineID = $LineID ;" ;
      $doMOVE = mysqli_query($con, $sqlMOVE);
      if (!$doMOVE) 
        {
          die('Could not MOVE data: ' . mysqli_error($con));
        }
      $doDELETE = mysqli_query($con, $sqlDELETE);
      if (!$doDELETE) 
        {
          die('Could not DELETE data: ' . mysqli_error($con));
        } 
    }
}  

mysqli_close($con);
?>

问题

现在，我首先加载 test.php 并从下拉菜单中选择一个名称，该名称将使用 getuser.php 生成的表填充页面的下半部分。这就是我的问题开始的地方。 在 getuser.php 页面上，我有 3 个按钮 - start和next按钮，以及 submit按钮。 start和next按钮让我回到开头(就像我要从头开始加载 test.php 一样)，而 update按钮可以工作，但它加载 update.php 而不加载 update.js， 重定向到 update.php 并成功处理它，(这是我通过利用多页面 AJAX 环境试图避免的全部事情。 ..) 如果我单独加载 getuser.php?q=John%20Doe，这些按钮的工作方式与我设计的完全一样。

我尝试过的

我将此代码放在 update.js 文件的开头，因为我在 test.php 和 getuser.php 中都调用了它:

$(document).ready(function(){ 

    $("div").css("border", "3px solid red");
  console.log("update.js loaded successfully");

});

只是为了确保我的 .js 文件正确加载。

如果正常加载页面(test.php)，页面顶部标题周围有一个红色小边框 - 因此 update.js 被调用，但在之后加载的 getuser.php 上没有调用它因为该页面上的 div 周围没有红色的小边框。如果我直接加载 getuser.php 而不通过 test.php，边框就在那里，一切正常。

当我开始进入这个领域时，我一定跳过了学习的某些部分，因为我不知道出了什么问题，或者我的某些代码仅在我直接加载页面而不是另一个页面“内部”时才起作用.

最佳答案

最大的问题是您加载到 DOM 中的 HTML 内容不会处理您包含的 JavaScript 文件。因此，您应该使用 jQuery 的 .load() 来正确加载 AJAX 调用后面的页面。这将加载包含的 JavaScript 文件。

整个区 block :

function showUser(str) {
  if (str !==".PM") {
    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","getuser.php?q="+str,true);
  xmlhttp.send();
}

变成:

function showUser(str) {
  if (str !==".PM") {
    if (str=="") {
      document.getElementById("txtHint").innerHTML="";
      return;
    } 
  }
  $("#txtHint").load( "getuser.php?q="+str );
}

关于javascript - 多页面环境下的PHP和JS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26614053/

上一篇：javascript - 如何在 javascript 中导航到网站，同时提供自定义 HTTP header ？

下一篇：javascript - 无法通过 iframe 添加 cookie

相关文章：

javascript - 为什么此 D3 代码将 <p> 元素添加到主体外部，而不是内部？

javascript - _.chain - 下划线 JS

javascript - 如何检查像素是否为空？

javascript - 使用 FabricJs 的裁剪功能

javascript - 简单的 jQuery 脚本在 Chrome 中工作，在 IE 中损坏

javascript - jwplayer:使用 seek()、onTime() 和 stop() 播放部分视频

javascript - 单击将参数发送到 bean 的链接后刷新页面的部分内容

php - 最好的 PHP 编程方法？

php - 使用 php 的客户端到客户端套接字

php - 为什么prepare语句没有执行？

©2024 IT工具网  联系我们