Отображение 2 разных результатов MySQL в разных полях формы с использованием JavaScript - PullRequest
0 голосов
/ 02 апреля 2012

У меня есть пользовательская форма, которая работает отлично. Страница использует сценарий javascript, который выполняет запрос mysql из внешнего php-файла и отображает результаты в таблице.

Что я хочу сделать, так это иметь возможность отображать результаты нескольких различных запросов в форме.

У меня есть 4 файла в этом примере. test.php который является формой getdata1.php, который получает результаты MySQL для информации о продукте getwhse1.php, который извлекает результаты mysql для информации хранилища getsu1.php, который извлекает результаты MySQL для продажи информации о единицах

В настоящее время скрипт работает только при получении результатов из getdata1.php? Как мне изменить javascripscript, чтобы я мог также отображать результаты из getwhse1.php и getsu1.php?

Ниже приведен код для существующих страниц. Я хочу, чтобы я мог ввести код продукта и отобразить сведения о нем в каждом из полей таблицы.

test.php

<html>
<head>
<title>Sales Portal</title>
<script type="text/javascript"> 
  function showUser(userNumber, str) 
  { 
    if (str=="") 
    { 
      document.getElementById("txtHint" + userNumber).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" + userNumber).innerHTML=xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET","getdata1.php?q="+str,true); 
    xmlhttp.send(); 
  }
</script>

</head>
<body topmargin=0>

<form name="orderform" id="orderform" action="newsale.php" method="post">

<table border=1>    

<tr>
<td>Product Code</td>
<td>Description</td>
<td>Warehouse</td>
<td>Selling Units</td>
</tr>
<tr id="r1">  
    <td width=100>
        <input size=10  type=number id=sku1 name=sku1 onchange="showUser(1, this.value)">
    </td>
    <td width=280>
        <div align="left" id="txtHint1">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="whse1">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su1">&nbsp;</div>
    </td>
</tr>
<tr id="r2">  
    <td>
        <input size=10  type=number id=sku2 name=sku2 onchange="showUser(2, this.value)">
    </td>
    <td>
        <div align="left" id="txtHint2">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse2">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su2">&nbsp;</div>
    </td>
</tr>
<tr id="r3">  
    <td>
        <input size=10  type=number id=sku3 name=sku3 onchange="showUser(3, this.value)">
    </td>
    <td>
        <div align="left" id="txtHint3">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse3">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su3">&nbsp;</div>
    </td>
</tr>
<tr id="r4">  
    <td>
        <input size=10  type=number id=sku4 name=sku4 onchange="showUser(4, this.value)">
    </td>
    <td>
        <div align="left" id="txtHint4">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse4">&nbsp;</div>
    </td>
    <td width=100>
        <div align="left" id="su4">&nbsp;</div>
    </td>
</tr>
</table>
</form>

</body>
</html>

getdata1.php

<?php
 $q=$_GET["q"];

$con = mysql_connect('localhost', 'username', 'password');
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }

mysql_select_db("dbname", $con);


$sql="SELECT Category, Description,SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
$rows=mysql_num_rows($result);

if($rows==0){echo "<font color=red><b>NOT A VALID PRODUCT CODE</b></font>";} else {
while($row = mysql_fetch_array($result))
   {
   echo "<font color=red>".$row['Description']."</font>, ";
   if($row['SellingUnits']=="CS"){echo "<font color=red>".$row['CasesPerPallet']."</font> ";} elseif($row['SellingUnits']=="SHR") {echo "<font color=red>".$row['ShrinksPerPallet']."</font> ";}
   }}

mysql_close($con);
 ?> 

getwhse1.php

<?php
 $q=$_GET["q"];

$con = mysql_connect('localhost', username', 'password');
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }

mysql_select_db("database", $con);

$sql="SELECT grouping FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
$rows=mysql_num_rows($result);

if($rows==0){echo "&nbsp;";} else {
while($row = mysql_fetch_array($result))
   {
   echo "<font color=red>".$row['grouping']."</font>, ";
   }}

mysql_close($con);
 ?> 

getsu1.php

<?php
 $q=$_GET["q"];

$con = mysql_connect('localhost', 'username', 'password');
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }

mysql_select_db("database", $con);

$sql="SELECT SellingUnits  FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
$rows=mysql_num_rows($result);

if($rows==0){echo "&nbsp;";} else {
while($row = mysql_fetch_array($result))
   {
   echo "<font color=red>".$row['SellingUnits ']."</font>, ";
   }}

mysql_close($con);
 ?> 

Мои навыки работы с JavaScript не существуют, как я могу отредактировать этот скрипт для выполнения всех трех запросов mysql и отображения результатов на странице? все активируется путем ввода кода продукта?

Спасибо и всего наилучшего, Райан

Ответы [ 2 ]

1 голос
/ 03 апреля 2012
<?php
  $q=$_GET["q"];
  $con = mysql_connect('localhost', 'username', 'password');
 header('Content-type: application/json');
  if (!$con ||strlen($q)>5){ die(json_encode(array('results'=>-1)))}
  mysql_select_db("dbname", $con);
  $result=mysql_query("SELECT * FROM skudata WHERE packcode = '$q'");
  echo json_encode(array('results'=>$result));
 mysql_close($con);
 ?>

<html><head><title>Sales Portal</title>
<style type="text/css"> 
.redtext {color: red}
</style>
<script type="text/javascript">
  function showUser(userNumber, str){ 
    if (str==""){ 
      document.getElementById("txtHint" + userNumber).innerHTML="";
    }
    if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest()}
    else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")}
    xmlhttp.onreadystatechange=function(){ 
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
    var json = JSON.parse(xmlhttp.responseText);
    result = json.results;
    if(result==-1){
      document.getElementById('txtHint'+userNumber).innerHTML="Database error.";
      } 
    if(result.length = 0){
      document.getElementById("txtHint"+userNumber).innerHTML="INVALID PRODUCT CODE"; 
    }
    else {
      i=0;
      while(i<result.length){
        var desc=result[i].Description+"&nbsp;";
        switch(result[i].SellingUnits){
          case "CS": desc += result[i].CasesPerPallet+"<br/>";
          break;
          case: "SHR": desc += result[i].ShrinksPerPallet+"<br/>";
          break;
        }
        document.getElementById('txtHint'+userNumber).innerHTML = desc;
        document.getElementById('whse'+userNumber).innerHTML=result[i].grouping+"<br\>";
        document.getElementById('su'+userNumber).innerHTML=result[i].SellingUnits+"<br/>";
        i++;
      } 
      xmlhttp.open("GET","getdata1.php?q="+str,true); 
      xmlhttp.send(); 
     }
</script>
</head>
<body topmargin=0>
<form name="orderform" id="orderform" action="newsale.php" method="post">
<table border=1>
<tr>
<td>Product Code</td>
<td>Description</td>
<td>Warehouse</td>
<td>Selling Units</td>
</tr>
<tr id="r1">  
<td width=100>
    <input size=10  type="number" id="sku1" name="sku1" onchange="showUser(1, this.value)">
</td>
<td width=280>
    <div align="left" id="txtHint1" class="redtext">&nbsp;</div>
</td>
<td width=100>
    <div align="left" id="whse1" class="redtext">&nbsp;</div>
</td>
<td width=100>
    <div align="left" id="su1" class="redtext">&nbsp;</div>
</td>
</tr>
<tr id="r2">  
<td>
    <input size=10  type="number" id="sku2" name="sku2" onchange="showUser(2, this.value)">
</td>
<td>
    <div align="left" id="txtHint2" class="redtext">&nbsp;</div>
</td>
<td>
    <div align="left" id="whse2" class ="redtext">&nbsp;</div>
</td>
<td width=100>
    <div align="left" id="su2" class="redtext">&nbsp;</div>
</td>
</tr>
<tr id="r3">  
<td>
    <input size=10  type=number id=sku3 name=sku3 onchange="showUser(3, this.value)">
</td>
<td>
    <div align="left" id="txtHint3" class="redtext">&nbsp;</div>
</td>
<td>
    <div align="left" id="whse3" class="redtext">&nbsp;</div>
</td>
<td width=100>
    <div align="left" id="su3" class="redtext">&nbsp;</div>
</td>
</tr>
<tr id="r4">  
<td>
    <input size=10  type=number id=sku4 name=sku4 onchange="showUser(4, this.value)">
</td>
<td>
    <div align="left" id="txtHint4" class="redtext">&nbsp;</div>
</td>
<td>
    <div align="left" id="whse4" class="redtext">&nbsp;</div>
</td>
<td width=100>
    <div align="left" id="su4" class="redtext">&nbsp;</div>
</td>
</tr>
</table>
</form>
</body>
</html>

Я не проверял этот код, но ошибки должны легко обнаруживаться в консоли браузера.Php не позволяет $ q быть более 5 символов для предотвращения инъекций.

1 голос
/ 02 апреля 2012

Поскольку каждый из них принимает один и тот же ввод GET, почему бы не объединить все три запроса в один скрипт?Затем выведите их в виде массива из трех объектов JSON.Дополнительная обработка для этого незначительна, даже если вы используете только один запрос за раз, ваш сценарий будет проще поддерживать, а JSON отделит отображение от вашего кода и облегчит его просмотр и управление.

Когда у вас есть все три запроса в скрипте, создайте новый массив для хранения результатов.

$ results = array ('results' => array ($ row1, $ row2, $row3));print json_encode ($ results);

Поскольку у вас нет HTML-кода в этом ответе, вам больше никогда не придется заходить в свой php-файл, чтобы изменить HTML-код того, как выглядит ваш вывод.

Затем вы используете JSON.parse () в вашем ajax responseText.Теперь ваши три таблицы результатов являются объектами JavaScript.Вы даже можете ссылаться на них по именам таблиц:

var response = JSON.parse (xmlhttp.responseText);

var row1 = response.results [0];

var row2 = response.results [1];

var row3 = response.results [3];

Теперь у вас есть доступ к своим результатам с точкой и именем поля.Как row3 [i] .SellingUnits (где i - индекс вашего массива row3. Другими словами, просматривайте результаты в вашем JS, а не в php).Вы можете написать это в свой HTML с помощью JS, как обычно.Это элегантноС результатами можно работать в JS (например, вы можете сделать математику для ваших результатов, чего вы не можете сделать сейчас. Лучше всего, вам не нужно повторно заходить в php, чтобы что-то подправить (например, изменить тег ab нанапример, тег h4. Еще одним преимуществом является то, что если вы решите изменить таблицу MySQL, JSON последует сразу же за изменением (вам все равно не нужно редактировать свой php).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...