如何使用JavaScript Ajax将两个值传递给PHP文件

Question

I have written a code for two dropdown boxes. 我已经为两个下拉框编写了代码。 when I select the values from two boxes, the values should go to a php file using GET method. 当我从两个框中选择值时，这些值应使用GET方法转到一个php文件中。 the values should go to php file when both boxes are selected. 同时选中两个框时，这些值应转到php文件。

Here is my code: 这是我的代码：

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

Answer 1

<!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;
}

Answer 2

Try this simple way using serialize . 使用serialize尝试这种简单的方法。 it will capture everything 它会捕获一切

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

And your update php page 而您的更新php页面

<?php


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


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


?>

Answer 3

To me it looks like you are pretty much there already apart from the value for the first dropdown. 在我看来，除了第一个下拉列表的值之外，您已经差不多了。

To get the value of the first dropdown menu you could use: 要获取第一个下拉菜单的值，可以使用：

<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 )">

However, I might be tempted in the CatName function to check that str2 is set before submitting the ajax request. 但是，在提交ajax请求之前，我可能会CatName函数来检查str2是否已设置。

如何使用JavaScript Ajax将两个值传递给PHP文件

问题描述

3 个解决方案

解决方案1
0 2016-02-27 09:27:19

解决方案2
0 2016-02-27 09:29:10

解决方案3
0 2016-02-27 09:34:12

如何使用JavaScript Ajax将两个值传递给PHP文件

问题描述

3 个解决方案

解决方案1 0 2016-02-27 09:27:19

解决方案2 0 2016-02-27 09:29:10

解决方案3 0 2016-02-27 09:34:12

解决方案1
0 2016-02-27 09:27:19

解决方案2
0 2016-02-27 09:29:10

解决方案3
0 2016-02-27 09:34:12