如何将变量发布到 php 并在同一页面上运行该 php？答案

【问题标题】：How can I post a variable to php and run that php on the same page?如何将变量发布到 php 并在同一页面上运行该 php？
【发布时间】：2014-06-12 00:26:35
【问题描述】：

我正在为一家当地服装店进行库存搜索，由于他们网站的设置方式，我需要运行 php 来提取数据并组织它，它与搜索表单在同一页面上运行。（我认为这需要使用 AJAX 来完成。我对 AJAX 很陌生：P）这是当前文件。

Search.php

<?php
    include(dirname(__FILE__) . '/../inc/init.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf- 8" />
    <title>Inventory | The Loft Ames</title>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="popup.css"> 
    <link rel="stylesheet" type="text/css" href="../css/loft_fonts.css" />
    <link rel="stylesheet" type="text/css" href="../css/loft_style.css" />
    <link href="../admin/themes/css/bootstrap.min.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
a:link {
    color: #FFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFF;
}
a:hover {
    text-decoration: none;
    color: #FFF;
}
a:active {
    text-decoration: none;
    color: #FFF;
}
.form-search{
    text-align:left;
}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
background-color: black;
}
html, body { margin: 0; padding: 0; }
div#DP01 {
    position:relative;
    width:575px;
    /*margin: 0 auto;*/
}th{
    cursor:pointer;
}
</style>
</script>
</head>
<body>
<div id="layout">
<div id="DP01">
    <br><h27><center>Search Our Inventory at The Loft</center></h27><br>
<form action="/test/results.php" method="post">
Search here: <input type="text" name="search"><br>
<input type="submit"><br>
<script type="text/javascript" src="jquery.min.js"></script>

<!--<a href="#" onclick="doSomething();">Click Me!</a>-->
</form>
<br><br>
<!-- <h27><center>View Our Current Inventory</center></h27>
<center>
<a href="#" onclick="getTableRecordsSearch('latest');">Show Latest Inventory</a>
</center> -->

<br><br>
<h31><center>Please contact us if you have any additional questions <a class="popup" href="/popups/contact.html"><strong>here.</strong></a><br>or call us 515-232-9053.</center></h31>
<br><br>
</div>

    </div>
    <?php
include('footer.php');
?>
</body>
</html>

results.php

<?php

$search = $_GET['search'];
if ($search == "") {
    echo "Please enter a query. <a href='/search.php'>Click Here</a> to go back";
  break;
}
else {
$data = array('key' => $API_KEY,
              /*'consignorId' => '1',*/
              'query' => $search,
              'includeItemsWithQuantityZero' => 'false');

$data_string = json_encode($data);

$context = stream_context_create(array(
  'http' => array(
    'method' => "POST",
    'header' => "Accept: application/json\r\n".
          "Content-Type: application/json\r\n",
    'content' => $data_string
  )
));

$result = file_get_contents('https://user.traxia.com/app/api/inventory', false, $context);


$jsonData = $result;
$phpArray = json_decode($jsonData, true);
$phpArray = $phpArray['results'];
$activeonly = array_filter($phpArray, function($active) { return $status['status']=="ACTIVE"; });
$mykeys = array('name','sku','category','color','size','currentPrice');
}
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/test/css/search-results.css">
<script type="text/javascript" src="/test/js/tablesorter/jquery-latest.js"></script> 
<script type="text/javascript" src="/test/js/tablesorter/jquery.tablesorter.js"></script>
<script>
$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 
</script> 
</head>
<div class="CSSTableGenerator"> 
<table id="myTable" class="tablesorter">
     <thead>
        <tr>
           <?php
        foreach($mykeys as $k) {
            if ($k == "name") {
              $k = "Name";
            }
            if ($k == "sku") {
              $k = "SKU";
            }
            if ($k == "category") {
              $k = "Category";
            }
            if ($k == "color") {
              $k = "Color";
            }
            if ($k == "size") {
              $k = "Size";
            }
            if ($k == "currentPrice") {
              $k = "Price";
            }
            echo "<th style='cursor:pointer'>$k<img src='/test/images/UpDown.png' width='8px' height='auto' style='margin: 0px 20px'></th>";
        }
        ?>
        </tr>
        </thead>
        <tbody>
        <?php
        foreach($phpArray as $key => $values) {
            echo '<tr>';
            foreach($mykeys as $k) {
                if ($values['category'] == 'UNCATEGORIZED') continue;
                $value = $k == "currentPrice" ? '$' . number_format($values[$k]/100,'2') : $values[$k];
                echo "<td>" . $value . "</td>";
            }
            echo '</tr>';
        }
        ?>
     </tbody>
  </table>
  </div>
</html>

所以基本上我需要合并这两个文件，而在提交搜索表单之前不运行第二个文件。谢谢！

【问题讨论】：

标签： javascript php jquery ajax

【解决方案1】：

是的 .. 您可以使用 Javscript 将搜索变量加载到页面上的 DIV 中。这个例子有一个登录表单，但想法是一样的。表单字段、提交的表单等。我还包含“请稍候”加载消息。之所以这样设计，是因为我在同一页面上有多个表单，并且我调用函数以使用函数的“formName”和“message”变量分别提交它们。

function loader(message) {
    if (message == "" || message == null) {
        message = "Please wait ...";
    }
    $('#DivWhereYouWantData').html('<div style="width:100%;text-align:center;margin-top:150px;"><div style="font-size:20px;"><b>' + message + '</b></div></div>');
}
function submitForm(formName,message) {
    $.ajax({
        data: $("#" + formName).serialize(),
        type: $("#" + formName).attr('method'),
        url: $("#" + formName).attr('action'),
        beforeSend: function() {
            loader(message);
        },
        success: function(response) {
            $('#DivWhereYouWantData').html(response);
        }
    });
    return false;
}

和标题中的 jQuery -

<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

以及与脚本一起使用的 HTML -

<form id="login" name="login" method="post" action="processLogin.php" onsubmit="return submitForm('login','Logging you in ...');">
    Logn: <input type="text" style="text-input" name="login" id="login" />
    Password: <input type="password" style="text-input" id="password" name="password" />                        
    <input style="background:none; border:none; padding:0; height:auto; width:auto;" type="image" src="img/signIn.png" />
</form>

<div id="DivWhereYouWantData">
    <!-- Dynamic content loads here -->
</div>

【讨论】：

【解决方案2】：

$("button").click(function(){
  $.ajax({
        url:"results.php",
        success:function(result){
              $("#div1").html(result);
     }
  });
});`

使用 Jquery Ajax 是更好的方法，并且看看这个链接试试第二个答案太简单了jQuery Ajax POST example with PHP

【讨论】：