多参数传输ajax功能

时间:2019-03-25 18:04:36

标签: javascript php jquery ajax

选择三个列表(课程,系列,组)后,需要生成一个自动表格。 传递功能参数后,它们取相同的值。

$(document).ready(function(){
  
	
	    $('#CourseList,#GroupList,#SeriesList').on('change',function(){
        
		 var Code_Course  = $(this).val();
		 var Code_Group = $(this).val();
		 var Code_Series  = $(this).val();
		
        if(Code_Course,Code_Group ,Code_Series{
            $.ajax({
                type:'POST',
               url:"page2.php",

             data: {Code_Course: Code_Course,Code_Group: Code_Group,Code_Series:Code_Series},
                success:function(html){
                    $('#table').html(html);
                }
            }); 
        }
    });
    });

1 个答案:

答案 0 :(得分:0)

看到这个,这里显示的解决方案效果很好。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>JS Bin</title>
</head>
<body>

CourseList
  <select id="CourseList">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
GroupList
  <select id="GroupList">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  SeriesList
  <select id="SeriesList">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
<script>

    $(document).ready(function(){
      
    	
    	    $('#CourseList,#GroupList,#SeriesList').on('change',function(){
            var f = document.createElement("form");
              var i = document.createElement("input"); //input element, text
				i.setAttribute('name','Code_Course');
				i.setAttribute('value',$('#CourseList').val());
				f.appendChild(i);
              var i = document.createElement("input"); //input element, text
				i.setAttribute('name','Code_Group');
				i.setAttribute('value',$('#GroupList').val());
				f.appendChild(i);
              var i = document.createElement("input"); //input element, text
				i.setAttribute('name','Code_Series');
				i.setAttribute('value',$('#SeriesList').val());
				f.appendChild(i);
    		
            
                $.ajax({
                    type:'POST',
                   url:"page2.php",
                  processData: false,
					   contentType: false,
                 data: new FormData(f),
                    success:function(html){
                        $('#table').html(html);
                    }
                }); 
        });
        });

  </script>


</body>
</html>