在AJAX中传递多个变量

时间:2015-06-29 13:15:16

标签: javascript php html ajax

我有一个HTML / PHP页面(sucessful.php)从另一个页面获取变量job_id

我正在尝试将两个变量及其数据从此页面发送到名为interview.php的页面,但job_id未传递到另一页面。

问题出在哪里?

successful.php

    <?php $getid =$_GET['jobid'];?>
    <html>
    <head>
        <link href="css/bootstrap.min.css" rel="stylesheet">

    <script>
    function showSuccess (str,$getid) {
      var job_id= $getid;

    var resp;
     if (window.XMLHttpRequest) {
        resp = new XMLHttpRequest();
        xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) { 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var data = "q="+str+"job_id="+job_id

         xmlhttp.open("POST", 
          "interview.php"); 
         xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  
         xmlhttp.send(data);
       xmlhttp.onreadystatechange =
      function display_data() {
       if (xmlhttp.readyState == 4 && xmlhttp.status==200) {

            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;


         } 
         }
      }


    </script>
    </head>
    <body>


    <div class="col-md-4 col-md-offset-4">
    <form>

        <?php 
    echo '<select name="number" onchange="showSuccess(this.value)" class="form-control">
      <option value="">Select a person:</option>
      <option value="1">1</option>

      <option value="5">5</option>
      <option value="0">0</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
      <option value="40">40</option>
      <option value="45">45</option>
      <option value="50">50</option>
      <option value="55">55</option>
      <option value="60">60</option>
      <option value="65">65</option>
      <option value="70">70</option>
      <option value="75">75</option>
      <option value="80">80</option>
      <option value="85">85</option>
      <option value="90">90</option>
      <option value="95">95</option>
      <option value="100">100</option>
      </select>';
      ?>

    </form>
    </div>
    <br>
    <div id="txtHint" class="col-md-4 col-md-offset-4"><b>The candidates</b></div>
    </body>
    </html>

interview.php
<?php 
$q = intval($_POST['q']);
?>

    <?php 
    $getid = $_REQUEST['job_id'];?>

    <?php
    include('includes/conn.php');
    $row="SELECT  DISTINCT id,name,idNo,jobTitle,job,SUM(points) AS total FROM shortlist WHERE job='$getid' 
    GROUP BY idNo ORDER BY total DESC LIMIT $q";
    $query=mysqli_query($conn,$row) or die(mysqli_error($conn));

    while($row=mysqli_fetch_array($query))
    {
      echo "<p>".$row['name'].$row['total']."</p>";

    }

    mysqli_close($conn);
    ?>

2 个答案:

答案 0 :(得分:1)

您正在使用POST所以它应该是:

var data = {q:str,job_id:job_id};

如果您想要获取,请将方法更改为GET,然后将数据附加为查询字符串:

var data = "?q="+str+"&job_id="+job_id;

将作业ID传递给函数:

echo '<select name="number" onchange="showSuccess(this.value,'.$_GET['jobid'].')" class="form-control">

<强> AJAX

<html>
<head>
    <link href="css/bootstrap.min.css" rel="stylesheet">
<script>
window.onload = function() {
    function showSuccess (){
        var success = document.getElementById("success");
        //parameters
        var e = document.getElementByName("number");
        var selectedNumber = e.options[e.selectedIndex].value;
        var jobId = document.getElementById("jobId").value;
        //data to send
        var params = {q:selectedNumber,job_id:jobId};

        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("POST", "interview.php", true);
        xmlhttp.setRequestHeader("Content-type", "application/json");
        xmlhttp.onreadystatechange = function() {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var data = JSON.parse(xmlhttp.responseText);
                var html='';
                for (var i in data) {
                    html +=  "<p>" + data.name + data.total + "</p>";
                }
                //print success to the div
                success.innerHTML=html; 
            }
        }
        xmlhttp.send(null);
    }
}
</script>
</head>
<body>
<div class="col-md-4 col-md-offset-4">
<form>
<select name="number" onchange="showSuccess()" class="form-control">
  <option value="">Select a person:</option>
  <option value="1">1</option>
  <option value="5">5</option>
  <option value="0">0</option>
  <option value="10">10</option>
  <option value="15">15</option>
  <option value="20">20</option>
  <option value="25">25</option>
  <option value="30">30</option>
  <option value="35">35</option>
  <option value="40">40</option>
  <option value="45">45</option>
  <option value="50">50</option>
  <option value="55">55</option>
  <option value="60">60</option>
  <option value="65">65</option>
  <option value="70">70</option>
  <option value="75">75</option>
  <option value="80">80</option>
  <option value="85">85</option>
  <option value="90">90</option>
  <option value="95">95</option>
  <option value="100">100</option>
  </select>
</form>
</div>
<br>
<div id="txtHint" class="col-md-4 col-md-offset-4"><b>The candidates</b></div>
<div id="success"></div>
<input id="jobId" value="<?php echo $_GET['job_id'] ?>" />
</body>
</html>

<强> PHP

<?php 
$q = intval($_POST['q']);
$job_id = $_POST['job_id'];
include('includes/conn.php');
$row="SELECT  DISTINCT id,name,idNo,jobTitle,job,SUM(points) AS total FROM shortlist WHERE job='$job_id' 
GROUP BY idNo ORDER BY total DESC LIMIT $q";
$query=mysqli_query($conn,$row) or die(mysqli_error($conn));
$data = array();
while($row=mysqli_fetch_array($query)){
 $data[]=$row;
}
mysqli_close($conn);
echo json_encode($data);
?>

答案 1 :(得分:0)

您需要使用&

来构建此字符串
var data = "q="+str+"&job_id="+encodeURIComponent(job_id);

您还需要以这种方式访问​​$getid PHP变量:

var job_id='<?php echo $getid ?>';

在您的showSuccess函数中,当您将PHP与javascript结合使用时 - 您可以删除第二个参数。