0

好的，这是我的问题。我有一个带有变量 searchResult 的 AJAX 脚本，我想从我的 result.php 中获取它，问题是我不知道应该如何编写获取前提。我试图获取 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>s 数组，然后循环遍历，从每个数组中收集名称和值：

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 回答