0

我只是在学习 AJAX，所以请耐心等待。我正在编写一个使用 AJAX 的小程序，该程序使用 HTML/Javascript 文件和 PHP 文件在数据库中添加和检索信息。我已经尝试了几次再现，但没有任何运气让页面留在主页上，只是用指示错误或成功的消息重置表单。PHP 文件是使用 mysqli 设置的，以处理文本字段和文件的提交，然后回显该消息。我使用 JQuery Cookbook 作为我最新版本的指南，但主页仍然离开并在浏览器中打开 PHP 文件，这当然是空白的。但是，它正在向数据库中添加一个新行，所以至少这是有效的。

我正在使用 PHPStorm 和 Firebug。关于我的代码为什么不起作用的任何想法？

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.min.js"></script>
    <script src="jquery.validate.js"></script>
    <script>
        $('addForm').validate();
        $('addForm').submit(function(event){
            event.preventDefault();

            $('input[name="usingAJAX"]', this).val('true');
            var $this=$(this);
            var url=$this.prop('action');
            var dataToSend = $this.serialize();
            var callback = function(dataReceived) {
                $this.hide();
                //result message
                $('body').append(dataReceived)
            };
            var typeOfDataToReceive = 'html';
            $.get(url, dataToSend, callback, typeOfDataToReceive)
        });
    </script>
</head>
<body>
    <form id="addForm" action="addActorInfo.php" enctype="multipart/form-data">
        <input type="hidden" name="usingAJAX" value="false"/>
        <label for="aname">Actor Name: </label>
        <input type="text" name="aname" id="aname" class=required/>
        <br>
        <br>
        <label for="aimage">Actor Photo: </label>
        <input id="aimage" type="file" name="aimage" class="required">
        <br>
        <br>
        <input type="submit" value="ADD"/>
    </form>
</body>
</html>
4

2 回答 2

1

几个问题。

  • 正如每个人都指出的那样，您的表单选择器$('addForm')缺少。#

  • 您缺少该$(document).ready()功能，因为在form调用 JavaScript 时您的功能尚不存在，这是必需的。

  • 您不需要其他submit处理程序，因为 jQuery Validate 插件具有内置 的submitHandler回调函数。根据文档，“验证后通过 Ajax 提交表单的正确位置。”

像这样的东西：

（假设OP的.ajax功能已经正确。）

<script src="jquery.min.js"></script>
<script src="jquery.validate.js"></script>
<script>
$(document).ready(function() {
    $('#addForm').validate({
        //other options,
        submitHandler: function (form) {

            // your ajax code

            return false;  // <-- stop form redirection since you used ajax
        }
    });
});
</script>
于 2013-02-19T21:41:02.853 回答
1

有几个问题，大多数已经在评论中讨论过：

  • 设置“提交”处理程序时的选择器错误。应该是$('#addForm')

  • 您正在尝试使用$.get()来处理包含“文件”<input>元素的表单。那是做不到的。

要上传文件，您可以：

  1. 发布您的表单（必须是 POST，而不是 GET）并为其提供<iframe>页面上隐藏元素的“目标”属性。来自服务器的响应应该包括 JavaScript 以适当地更新父页面（上面有表单的页面）。

  2. 使用 HTML5 File API 获取文件内容，然后通过 XHR 上传。我从来没有尝试过这样做，但这是一个较旧的 SO question about it。

于 2013-02-19T21:47:55.323 回答