10

我正在尝试向自己发布一些表单数据但没有成功。我的代码如下

<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 一起使用。

4

3 回答 3

16

你完全混合了两种方法。

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

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

尝试

 <script type="text/javascript">
    $(document).ready(function () {
       $('.x-button').live("click", function () {
           $.post({
                  data: $('form#myform').serialize(),
                  success: function (data) {
                     alert("Data Loaded:");
                  }
              });
          });
        });
</script>
于 2012-07-25T19:16:27.023 回答
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 }?>
于 2012-07-25T19:23:29.030 回答
2

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

于 2012-07-25T19:12:13.297 回答