Question

我试图将一些表格数据发布到自己没有成功。我的代码如下

<html>
    <title>Post to self</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">

    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.x-button').live("click", function () {
                $.ajax({
                    type: "POST",
                    url: "self.php",
                    data: $(".aj").serialize(),
                    success: function (data) {
                        alert("Data Loaded:");
                    }
                });
            });
        });
    </script>
    </head>

    <body>

               <?php
              if(isset($_POST['submit']))
              {
             echo $_POST['firstname'];
              }
              ?>
            <form name="input" action="" class="aj" method="post">
                <article>
                    <label>Firstname</label>
                    <input type="text" name="firstname" value="Ed" class="x-input"
                    />
                </article>
                <article>
                    <label>Lastname</label>
                    <input type="text" name="lastname" value="Doe" class="x-input"
                    />
                </article>
                <article>
                    <label>City</label>
                    <input type="text" name="city" value="London" class="x-input"
                    />
                </article>
                <input type="submit" value="Update Options" class="x-button" />
            </form>
    </body>

</html>

在普通的php和html中使用<form name="test" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">时，它可以工作，但我无法使用jquery。

Answer 1

你正在混合两个approch。

<form id="myform" action="" >
  .....
</form>

要将ajax请求发送到同一页面，您可以将url参数保留为空/删除

TRY

 <script type="text/javascript">
    $(document).ready(function () {
       $('.x-button').live("click", function () {
           $.post({
                  data: $('form#myform').serialize(),
                  success: function (data) {
                     alert("Data Loaded:");
                  }
              });
          });
        });
</script>

Answer 2

在内联javascript函数末尾添加return false;，以避免表单以“正常”方式提交

Answer 3

当然，您不希望将整个页面包含在响应文本中，因此如果需要ajax，您需要一个语句

    <?php
/* AJAX check  */
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {

  if(isset($_POST))
  {
        print_r($_POST);
  }

}else{
?>   
<html>
    <title>Post to self</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">

    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.x-button').live("click", function () {
                $.ajax({
                    type: "POST",
                    url: "self.php",
                    data: $(".aj").serialize(),
                    success: function (data) {
                        alert("Data Loaded:");
                    }
                });
            });
        });
    </script>
    </head>

    <body>
       <form name="input" action="" class="aj" method="post">
                <article>
                    <label>Firstname</label>
                    <input type="text" name="firstname" value="Ed" class="x-input"
                    />
                </article>
                <article>
                    <label>Lastname</label>
                    <input type="text" name="lastname" value="Doe" class="x-input"
                    />
                </article>
                <article>
                    <label>City</label>
                    <input type="text" name="city" value="London" class="x-input"
                    />
                </article>
                <input type="submit" value="Update Options" class="x-button" />
            </form>
    </body>

</html>
<?php }?>

使用jquery将数据发布到self

3 个答案: