使用ajax

时间:2017-05-24 05:46:00

标签: php jquery ajax

page1.php中

<?php
   echo $first;
   echo $secound;
   echo $third;
   echo $four;
?>
<form>
    <input type="text" name="five" value=""></input>
    <input type="text" name="six" value=""></input>
    <input type="text" name="seven" value=""></input>
</form>
<button class="button">Submit</button>

我希望在单击按钮时,使用ajax将所有这4个php变量和3个输入值传递给名为'page2.php''page3.php'的页面。 我应该从page2和page3返回结果,并在page1.php上显示为成功。

3 个答案:

答案 0 :(得分:0)

您无法直接将服务器端变量访问到jquery或javascript中。您需要在某些html元素中回显变量,然后才能像隐藏输入一样访问它。

答案 1 :(得分:0)

试试这个,但如果你有更多php个变量,最好使用隐藏输入来提交所有变量。

<?php
   echo $first;
   echo $secound;
   echo $third;
   echo $four;
?>
<form id="my_form">
  <input type="text" name="five" value=""></input>
  <input type="text" name="six" value=""></input>
  <input type="text" name="seven" value=""></input>
</form>
<a href="javascript:void()" onclick="submitForm()" class="button" >Submit</a>
<br>
<div id="ajax_results"></div>

function submitForm(){
   var phpVars = "&first=<?php echo $first;?>&second=<?php echo $second;?>&third=<?php echo $third;?>&four=<?php echo $four;?>";

   //page2.php ajax
   $.ajax({

        url: "page2.php",
        data: $("#my_form").serialize()+phpVars,
        type: "post",
        success: function(response){
            $("#ajax_results").html(response);
        }

   });

   //page3.php ajax
   $.ajax({

        url: "page3.php",
        data: $("#my_form").serialize()+phpVars,
        type: "post",
        success: function(response){
            $("#ajax_results").append("<h2>Page3 Ajax Result</h2>"+response);
        }

   });
}

答案 2 :(得分:0)

Give id same as name in your form
for the following lines
  <input type="text" id="five" name="five" value=""></input>
  <input type="text" id="six" name="six" value=""></input>
  <input type="text" id="seven" name="seven" value=""></input>

then do like this in jquery.

    <script type = "text/javascript" language = "javascript">
     $(document).ready(function() {

        $(".button").click(function(event){

            $.post("page1.php",
            {
              first: "<?php echo $first ?>",
              secound: "<?php echo $secound ?>",
              third: "<?php echo $third ?>",
              four: "<?php echo $four ?>",
              five: $('#five').val();
              six: $('#six').val();
              seven: $('#seven').val();

            },
            function(data,status){
                alert("Data: " + data + "\nStatus: " + status);
                //do something
            });

            $.post("page2.php",
            {
              first: "<?php echo $first ?>",
              secound: "<?php echo $secound ?>",
              third: "<?php echo $third ?>",
              four: "<?php echo $four ?>",
              five: $('#five').val();
              six: $('#six').val();
              seven: $('#seven').val();

            },
            function(data,status){
                alert("Data: " + data + "\nStatus: " + status);
                //do something
            }); 
        });

     });
    </script>