0

OKay、これが私の問題です。result.phpからフェッチしたい変数searchResultを持つAJAXスクリプトがあります。問題は、フェッチ前提をどのように記述すべきかわからないことです。document.getElementsByName（str.name）;でフェッチしようとしました。

それは私が助けたくないshowSearch関数です。

私は自分のコードを投稿し、誰かが良い答えを持っていることを願っています。参考までに-私はAJAXがあまり得意ではありません。

<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"> </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery    /1/jquery.min.js"> </script>
<title>Search</title>

<script>
function showSearch(str)
{
var muffin = document.getElementsByName(str.name);
var xmlhttp;
if(str=="")
{
document.getElementById("searchDiv").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("searchDiv").innerHTML=xmlhttp.responseText;
 }
}

 var searchResult ="result.php?area="+muffin+"&arealimiter="+muffin+"&pris="+muffin+"&   prislimiter="+muffin+"&avgift="+muffin+"&avgiftlimiter="+muffin+"&objekttyp="+muffin;
 xmlhttp.open("GET",searchResult,true);
 xmlhttp.send();
 }
 </script>
 </head>
 <h2>
 Hitta bostader!
 </h2>

 <body>
 <?php
 include "functions.php";

 $link = pg_connect("host=xxxx dbname=xxxxx user=xxxx password=xxxxxx");
 $maxarea = pg_query($link, "SELECT MAX(area) FROM bostader");
 $minarea = pg_query($link, "SELECT MIN(area) FROM bostader");
 $maxpris= pg_query($link, "SELECT MAX(pris) FROM bostader");
 $minpris= pg_query($link, "SELECT MIN(pris) FROM bostader");
 $maxavgift = pg_query($link, "SELECT MAX(avgift) FROM bostader");
 $minavgift = pg_query($link, "SELECT MIN(avgift) FROM bostader");
 $rum = pg_query($link, "SELECT DISTINCT rum FROM bostader ORDER BY rum");
 $lan = pg_query($link, "SELECT DISTINCT lan FROM bostader ORDER BY lan");
 $objekttyp = pg_query($link, "SELECT DISTINCT objekttyp FROM bostader ORDER BY objekttyp");
 ?>
 <form id="searchForm" action="">

 <?php
 if (isset($_COOKIE["arealimiter"])) {
$isAreaMax = strcmp($_COOKIE["arealimiter"], "min");
}
 ?>
 Area: <input onchange='showSearch(this.value)' type="number" name="area" <?php
 if (isset($_COOKIE["area"]))
echo "value=\"".$_COOKIE["area"]."\"";
 ?>min="<?php echo $minarea;?>" max="<?php echo $maxarea;?>"/> <br>
 <input onchange='showSearch(this.value)' type="radio" name="arealimiter" value="max"<?php if    ($isAreaMax) echo "checked"; ?>>Max
 <input onchange='showSearch(this.value)' type="radio" name="arealimiter" value="min" <?php if (!$isAreaMax) echo "checked"; ?>>Min <br>

Rum: <br>
<?php
$numrum = pg_numrows($rum);
for ($i = 0; $i < $numrum; $i++) {
$row = pg_fetch_array($rum, $i);
echo "<input onchange='showSearch(this.value)' type=\"checkbox\" name=\"rum[]\" value=\"".  $row["rum"]. "\"";
if (isset($_COOKIE["rum".$i]))
    echo " checked";
echo ">". $row["rum"]. "<br>";
 }
 ?> <br>

 <?php
 if (isset($_COOKIE["prislimiter"])) {
$isPrisMax = strcmp($_COOKIE["prislimiter"], "min");
}
 ?>

 Pris: <input onchange='showSearch(this.value)' type="number" name="pris"<?php
 if (isset($_COOKIE["pris"]))
        echo "value=\"".$_COOKIE["pris"]."\"";
 ?>min="<?php echo $minpris;?>" max="<?php echo $maxpris;?>" /> <br>
 <input onchange='showSearch(this.value)' type="radio" name="prislimiter" value="max" <?php if ($isPrisMax) echo "checked"; ?>>Max
 <input onchange='showSearch(this.value)' type="radio" name="prislimiter" value="min"<?php if (!$isPrisMax) echo "checked"; ?>>Min <br>

 <?php
 if (isset($_COOKIE["avgiftlimiter"])) {
$isAreaMax = strcmp($_COOKIE["avgiftlimiter"], "min");
}
 ?>

 Avgift: <input onchange='showSearch(this.value)' type="number" name="avgift"<?php
 if (isset($_COOKIE["avgift"]))
echo "value=\"".$_COOKIE["avgift"]."\"";
 ?>min="<?php echo $minavgift;?>" max="<?php echo $maxavgift;?>" /> <br>
 <input onchange='showSearch(this.value)' type="radio" name="avgiftlimiter" value="max" <?php if ($isAvgiftMax) echo "checked"; ?>>Max
 <input onchange='showSearch(this.value)' type="radio" name="avgiftlimiter" value="min"<?php if (!$isAvgiftMax) echo "checked"; ?>>Min <br>

 Lan: <br>
 <?php
 $numlan = pg_numrows($lan);
 for ($i = 0; $i < $numlan; $i++) {
$row = pg_fetch_array($lan, $i);
echo "<input onchange='showSearch(this.value)' type=\"checkbox\" name=\"lan[]\" value=\"", $row["lan"]."\"";
if (isset($_COOKIE["lan".$i]))
    echo " checked";
echo ">". $row["lan"]. "<br>";
 }
 ?> <br>

 Objekt Typ: <br>
 <?php
 $numtyp = pg_numrows($objekttyp);
 for ($i = 0; $i < $numtyp; $i++) {
$row = pg_fetch_array($objekttyp, $i);
echo "<input onchange='showSearch(this.value)' type=\"checkbox\" name=\"objekttyp[]\"   value=\"". $row["objekttyp"]."\"";
if (isset($_COOKIE["objekttyp".$i]))
    echo " checked";
echo ">". $row["objekttyp"]. "<br>";
 }
 ?> <br>

 </form>

 <div id="searchDiv">Search result will be displayed here...</div>

 </body>
 </html>
4

1 に答える 1

0

jQuery を使用しているため$.ajax()、再発明するのではなく、組み込み関数を使用する必要があります。<input>いずれかが変更されるたびに検索を実行したいようです。

出発点として、次のjQuery AJAX GETを使用します

<script type='text/javascript'>
    $(function(){
        var $form = $('#searchForm'); // a handle to your form element

        function showSearch() { // no need to pass anything to this function
            $.ajax({
                type: 'GET',
                url: 'result.php',
                data: $form.serialize() // serialize all form elements with a name attribute
            }).done(function(data) {
                // do something with search result, supplied as the "data" variable,
                // in your case just put the results into the `<div id="searchDiv">`
                $('#searchDiv').html(data);
            });
        }

        // Edit: This is the new function

        // bind the showSearch function to the change event of all inputs
        $('#searchForm').on('change', 'input', showSearch);

    });
</script>

簡単な例<form>-編集：インラインイベントバインディングを削除

<form id="searchForm">
    <input type="text" name="one" value="one"/>
    <input text="text" name="two" value="two"/>
</form>

result.phpこれにより、クエリ文字列を使用して HTTP GET が実行されます?one=one&two=two

編集: jQuery を使用したくない場合は、クロスブラウザーの XMLHTTPRequest コードを開発する際の問題に備えてください。本当にコードを保持したい場合、変更する必要がある唯一の部分は<input>、<form>. JavaScript を使用してこれを行うことができます。

document.getElementsByTagName('input');

これにより、 の配列が得られ<input>、ループして、それぞれから名前と値が収集されます。

var inputs = document.getElementsByTagName('input');
var querystring = '?';
for (i = 0; i < inputs.length; i++) {
    querystring += inputs[i].name + '=' + inputs[i].value + '&';
}

// now remove the last '&' from querystring (or do the above loop differently)

ご覧のとおり、開発、テストが必要で、バグがある可能性があるコードが増えているため、単純な jQuery$.serialize()関数の使用をお勧めします :-)

于 2013-02-22T14:17:03.390 に答える