关于AJAX和PHP的一些问题以及如何在搜索变量中设置多个参数

时间：2013-02-22 13:42:33

标签： php ajax dom

好的，这是我的问题。我有一个带有变量searchResult的AJAX脚本，我想从我的result.php中获取，问题是我不知道应该如何编写fetch前提。我试图获取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>

1 个答案:

答案 0 :(得分：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

对?one=one&two=two执行HTTP GET

编辑：如果您不想使用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()函数的原因： - ）

相关问题
最新问题