2014-06-11 96 views
0

我正在爲本地服裝商店進行庫存搜索,並且由於他們的網站設置方式,我需要運行php來提取數據並將其組織到與搜索表單相同的頁面上。 (我認爲這需要用AJAX來完成,我對AJAX非常陌生:P) 這裏是當前文件。如何發佈一個變量到php並在同一頁上運行該php?

的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> 

所以基本上我需要這兩個文件合併一段時間,直到搜索表單已提交未運行,第二個文件。謝謝!

回答

0

是的..你可以加載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> 
0
$("button").click(function(){ 
    $.ajax({ 
     url:"results.php", 
     success:function(result){ 
       $("#div1").html(result); 
    } 
    }); 
});` 

只是使用jQuery的Ajax的更好的方式來這樣做和 檢查出thsi鏈接嘗試第二個答案它太簡單了jQuery Ajax POST example with PHP

相關問題