使用ajax将多个参数通过POST方法传递到php

Question

我将使用AJAX通过POST方法向我的PHP文件传递多个参数，以便我可以查询MySQL数据库。

HTML文件：

        <div class="dropdown dropdown-dark">
            <select  class="dropdown-select" id="searchselect11" required>

                        <option value="faculty">Faculty</option>
                        <option value="dept">Dept.</option>
                        <option value="course">Course</option>
                        <option value="year">Year</option>
                        <option value="name">Name</option>

            </select>
        </div> 


<td style="padding:5px;"> <input type="text" id="searchtext11" required></td>

<button id="searchgo1"  onclick="searchone()"></button>

这是Javascript文件，我成功地访问了下拉列表和文本框中的值，并将它们分别存储在“sv”和“searchtext11”变量中。但问题是如何将这两个值传递给PHP文件。问题似乎出现在传递给“xmlhttp.send(the_data);”的“the_data”变量中。

“searchone()”函数如下：

function searchone()
{
//alert("hi");

var xmlhttp;
var sel = document.getElementById('searchselect11'); 
var sv = sel.options[sel.selectedIndex].value;
var searchtext11= document.getElementById("searchtext11").value;
var  the_data = 'select='+sv+'text='+searchtext11;


if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }




  xmlhttp.open("POST", "searchone.php", true);          
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");            
  xmlhttp.send(the_data);       


  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
      document.getElementById("searchresults").innerHTML = xmlhttp.responseText;
    }
  }
}

这段PHP代码只有在

var the_data='select='+sv;

searchone.php

<?php   


if (isset($_POST['select'])) {
    $str = $_POST['select'];    // get data

    echo $str;
}
?>

我该如何将下拉列表和文本框的值传递到我的PHP文件中，以便我可以使用这些变量构建SQL查询。

- akashaggarwaal

Answer 1

您需要使用一个与符号，就像它是一个 GET 一样。此外，您应该对您的文本进行编码，以确保它不包含任何可能具有特殊含义的字符。

您需要使用一个 & 符号，就像它是一个 GET 一样。此外，您应该对您的文本进行编码，以确保它不包含任何可能具有特殊含义的字符。

var the_data = ''
    + 'select=' + window.encodeURIComponent(sv)
    + '&text=' + window.encodeURIComponent(searchtext11);
//     ^                    ^^

您无需在服务器端手动解码，因为您已经让它知道 POST 数据是 x-www-form-urlencoded。

- Paul S.

---

我想补充的是，在 window.encodeURIComponent 中的 window 是隐式的，可以省略... - Basic

@akashaggarwaal 我建议你两个都检查一下。@Basic 大多数情况下可以省略 window，但是当我使用 window 的 methods 时，我的风格是保留它。因此，例如，我也会使用 window.setTimeout。 - Paul S.

@vladkras 如果客户在<input>中输入像“hello＆somevar = iWin”这样的字符串，会怎么样？ - Paul S.

@vladkras 但最好的情况是当我开始处理它时，网站不会崩溃 :P - Paul S.

你最好使用 while($r = mysql_fetch_array($rs)) { //do what you need with $r array} 代替 $nr = mysql_num_rows($rs); for ($i=0; $i<$nr; $i++) { $r = mysql_fetch_array($rs); echo $r["];。 - vladkras

Answer 2

在这个字符串中添加 & 符号：

var  the_data = 'select='+sv+'&text='+searchtext11;

- vladkras

---

@Rush.2707 任意数量的变量：var data = 'var1='+var1+'&var2='+var2+'&var3='+var3+'... etc. 字符串长度仅受GET请求长度（约8Kb）限制。此外，最好对每个变量使用encodeURIComponent()。 - vladkras