Question

我是一个完整的Ajax新手。

我的非ajax表单目前看起来像这样：

<form id='myform' action=".htmlspecialchars($_SERVER["PHP_SELF"])." method='post''/>
                <input type='hidden' name='id' value='$id' />
                <td>                    
                    <input style='height:18px' type='date' name='date' value='$date' required/>                                                                                                     
                </td>
                <td>                    
                    <select name='status' form='myform' required/>
                      <option>$status</option>                                        
                      <option value='status_one'>status_one</option>

                    </select>
                </td>
                <td>
                    <input form='myform' type='text' name='memo' value='$memo'/>
                </td>
                <td>
                    <input form='myform' type='submit' value='Save' />
                    </form> 
                </td>

当数据发布到同一页面时，以下代码在提交时检索它：

if ($_SERVER["REQUEST_METHOD"] == "POST") {
   //do stuff
}

这项工作正常，但我希望能够在不刷新页面的情况下提交，因此表单信息将在后台提交。我知道Ajax是去这里的方式，我读了很多关于它的内容，但是我无法让它工作。我不确定Ajax脚本是否应该替换检索部分，或者它是否一起工作。

非常感谢。

Answer 1

使用jQuery $.post

<script>
$(function(){

    $("#submit").click(function()
    {
       var form = $("#myform").serialize();
       $.post('url.php', form, function(data){
       alert(data);
    });
  });
});
</script>

注意：您需要正确识别提交按钮。

Answer 2

AJAX使用javascript中的其他代码替换提交按钮的功能。 @ getvivekv的解决方案对你来说很合适。

如果将PHP服务器端分成不同的脚本（或者将ajax处理放在最顶层，然后将exit;放在最后，那么PHP服务器端将更容易实现。）

如果你翻阅a good tutorial或another one之后再过分猛烈地反对新型技术，那么你的生活将会更加令人沮丧。

如果您是第一次使用AJAX，我实际上建议您使用普通的javascript进行操作，这样您就知道该怎么做了 - 然后当您了解它时，请查看它在jquery中的工作原理。

Answer 3

以下是一个快速示例，说明如何使用Ajax将其全部保存在一个文件中：

首先，在页面顶部添加处理表单数据的逻辑：

<?php 

if ($_SERVER["REQUEST_METHOD"] == "POST") {
       // output for example
       echo $_POST['id'] . "<br>";
       echo $_POST['date'] . "<br>";
       echo $_POST['status'] . "<br>";
       echo $_POST['memo'] . "<br>";

      //do stuff
}
   ?>

然后您可以添加ajax脚本：

   <!-- remove jQuery if already included -->
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('#myform').submit(function() {
                $.ajax({
                    type:'POST',
                    url:'<?php echo $_SERVER["PHP_SELF"]; ?>',
                    data: $(this).serialize(),
                    success: function(data) {
                     $('#ajax-result').html(data);
                    }
                });
                return false;
            });
        });
    </script>

return false;会阻止默认表单提交。
.serialize()方法在标准中创建文本字符串包含表单数据的URL编码表示法。
success:回调中的.html()方法将返回一旦脚本处理完，就会将数据发送到指定的元素。

然后，在下面添加您的表单：

<?php if (empty($_POST)): ?>
   <form id='myform' action="<?php echo $_SERVER["PHP_SELF"]; ?>" method='post'/>
                <input type='hidden' name='id' value='$id' />
                <td>                    
                    <input style='height:18px' type='date' name='date' value='$date' required/>                                                                                                     
                </td>
                <td>                    
                    <select name='status' form='myform' required/>
                      <option>Option 1</option>                                        
                      <option>Option 2</option>

                    </select>
                </td>
                <td>
                    <input form='myform' type='text' name='memo' value='$memo'/>
                </td>
                <td>
                    <input form='myform' name="submit" type='submit' value='Save' />
   </form> 
                </td>
<?php endif; ?>
<!-- This is the div in which your data will be returned. -->
    <div id="ajax-result"></div>

请注意，有很多方法可以帮助您查看此处提到的教程。

如何使用PHP通过Ajax提交表单

3 个答案: