如何將兩個值傳遞給使用JavaScript的PHP文件Ajax

我已經爲兩個下拉框編寫了代碼。當我從兩個框中選擇值時，這些值應該使用GET方法進入一個php文件。當這兩個框被選中時，這些值應該到php文件。如何將兩個值傳遞給使用JavaScript的PHP文件Ajax

這裏是我的代碼：

<script> 
    function CatName(str1, str2) { 

     if (str == "") { 
      document.getElementById("album_name").innerHTML = ""; 
      return; 
     } else { 
      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("album_name").innerHTML = xmlhttp.responseText; 
       } 
      }; 
      xmlhttp.open("GET", "update.php?q=" + str1 + "&q1=" + str2, true); 
      xmlhttp.send(); 
     } 
    } 
</script> 

<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1"> 
    <div class="form-group"> 
     <select class="form-control" name="category_name" id="id-of-the-first-select-box-here"> 
      <option value="" selected>Please Select</option> 
      <option value="Birds">Birds</option> 
      <option value="Animals">Animals</option> 
      <option value="Notinlist">Category Not in list</option> 
     </select> 
    </div> 
</div> 
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1"> 
    <div class="form-group" > 
     <select class="form-control" name="album_name" onchange="CatName(this.value, document.getElementById('id-of-the-first-select-box-here').value)"> 
      <option value="" selected>Please Select</option> 
      <option value="sadb">sadb</option> 
      <option value="Animals">Animals</option> 
      <option value="Notinlist">Category Not in list</option> 
     </select> 
    </div> 
</div>

來源

2016-02-27 Vadivel Murugan M

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
    <meta name="generator" content="PSPad editor, www.pspad.com"> 
    <title> 
    </title> 
<script> 
    $("document").ready(function() 
    { 
     $("#web_master_name").change(function()  // domain sorting via webmasters 
    { 
    var cat_val=("#category_name").val(); 
    var alb_val=("#album_name").val(); 
     $.post('ajax_actions.php?act=get_cat&cat_val='+cat_val+'&alb_val='+alb_val,function(data) 
     { 

      aler(data); 
     }); 
    }); 
    }); 
    </script> 
    </head> 
    <body>  
    <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">         
     <div class="form-group">           
     <select class="form-control" id="category_name">            
      <option value="" selected>Please Select 
      </option>            
      <option value="Birds">Birds 
      </option>             
      <option value="Animals">Animals 
      </option>            
      <option value="Notinlist">Category Not in list 
      </option>           
     </select>         
     </div>        
    </div>        
    <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">         
     <div class="form-group" >           
     <select class="form-control" id="album_name">            
      <option value="" selected>Please Select 
      </option>            
      <option value="sadb">sadb 
      </option>             
      <option value="Animals">Animals 
      </option>            
      <option value="Notinlist">Category Not in list 
      </option>           
     </select>         
     </div>        
    </div> 
    </body> 
</html> 




php file 
<?php 
error_reporting(0); 
foreach ($_GET as $name => $value) { $$name = $value; } 
foreach ($_POST as $name => $value) { $$name = $value; } 

// warning Dont chnage anything in This ajax action file 
// ------------------------------------------------------------------------------- 
if($act=="get_cat") // function for saving domain 
{ 
    echo $cat_val; 
    echo $alb_val; 
}

來源

2016-02-27 09:27:19

只有你在上面的代碼中添加了jquery liabrary –

嘗試使用serialize這種簡單的方法。這將捕捉一切

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script> 
<script> 

$(function(){ 


    $(document).on("click", ".submit", function(e) { 
    e.preventDefault(); 


var first = $("#id-of-the-first-select-box-here").val(); 
var second = $("#secondselect").val(); 


if(first=='') 
{ 
    alert("enter first select"); 

} 

else { 


     //Built a url to send 
     var info = $("#form").serialize();   
     $.ajax({ 
      type: "POST", 
      url: "update.php", 
      data: info, 
      success: function(result){ 

       alert(result); 
       $("#form")[0].reset(); 
       $('#area').html(html); 

      } 
     }); 

     e.preventDefault(); 

} 
    }); 

}); 


</script> 

<div id="area"></div> 
<form id="form"> 

<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1"> 
    <div class="form-group"> 
     <select class="form-control" name="category_name" id="id-of-the-first-select-box-here"> 
      <option value="" selected>Please Select</option> 
      <option value="Birds">Birds</option> 
      <option value="Animals">Animals</option> 
      <option value="Notinlist">Category Not in list</option> 
     </select> 
    </div> 
</div> 
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1"> 
    <div class="form-group" > 
     <select class="form-control" id="secondselect" name="album_name" onchange="CatName(this.value, document.getElementById('id-of-the-first-select-box-here').value)"> 
      <option value="" selected>Please Select</option> 
      <option value="sadb">sadb</option> 
      <option value="Animals">Animals</option> 
      <option value="Notinlist">Category Not in list</option> 
     </select> 
    </div> 
</div> 

<input name="submit" class="submit" type="button"> 

</form>

而且您的更新PHP頁面

<?php 


$category_name = $_POST['category_name']; 
$album_name = $_POST['album_name']; 


//your result 
    echo $category_name; 
    echo $album_name; 


?>

來源

2016-02-27 09:29:10

對我來說，它看起來像你從第一個下拉的值是非常有已經分開。

爲了得到第一個下拉菜單中的值，可以使用：

<select class="form-control" name="album_name" onchange="CatName(this.value, document.getElementById('id-of-the-first-select-box-here').options[ document.getElementById('id-of-the-first-select-box-here').options.selectedIndex ].value)">

不過，我可能會在CatName功能被誘惑檢查str2被提交Ajax請求之前設置。

來源

2016-02-27 09:34:12 RamRaider

如何將兩個值傳遞給使用JavaScript的PHP文件Ajax

回答

相關問題