如何在不刷新页面的情况下提交表单

时间:2014-06-08 04:12:56

标签: php jquery html

这是我的html代码,当我点击提交按钮时它显示警告然后当我打开retrieveform.php它没有显示我的价值请解决这个谜

   <html>
   <head>
   <script type="text/javascript" src="jquery.js"></script>
   <script>
    $(function () {

    $('form').on('submit', function (e) {

      e.preventDefault();

      $.ajax({
        type: 'post',
        url: 'retrieveform.php',
        data: $('form').serialize(),
        success: function () {
          alert('helllo');
        }
      });

    });

  });
 </script>
 </head>
 <body>
 <form>
 <input type="text"name="t1">
 <input type="submit"name="s1"value="submit">
 </form>
 </body>
 </html>

我的retrieveform.php是

 <?php
 if($_POST['t1'])
 {
 echo $_POST['t1'];
 }
 else
 {
 echo "hekllojjio";
 }
 ?>

1 个答案:

答案 0 :(得分:0)

元素“t1”是否可能存在,因为它是表单的一部分,但是空或只是空字符。也许检查是否是这种情况?

<?php
    if($_POST['t1'] && !empty($_POST['t1'])) {
        echo "You submitted t1 of: ".$_POST['t1'];
    } else {
        echo "t1 is empty";
    }
?>

另外值得注意的是,您可能希望使用类似firebug的内容来查看加载的ajax页面及其结果。除非您将响应的内容设置到页面中,否则ajax加载页面上的echo语句将不会显示在父页面上:

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(function () {
                $('.form').on('submit', function (e) {
                    tValue = $(this).find(input[type=text]:first).val();
                    e.preventDefault();
                    $.ajax({
                        type: 'post',
                        url: 'retrieveform.php',
                        data: $('form').serialize(),
                        success: function (response) {
                            alert('helllo');
                            $('#placeholder').html(response);
                            $('#placeholder2').html(tValue);
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <?PHP for ($i = 1; $i <= 10; $i++) { ?>
        <form class="form" name="form_<?PHP echo $i; ?>" id="form_<?PHP echo $i;?>">
            <input type="text" id="t<?PHP echo $i; ?>" name="t<?PHP echo $i; ?>">
            <input type="submit" name="s<?PHP echo $i; ?>" value="submit">
        </form>
        <?PHP } ?>
        <div id="placeholder"></div>
        <div id="placeholder2"></div>
    </body>
</html>

这样你的ajax加载页面的echo将被放在“占位符”div的页面上。