如何使用Ajax将表单数据传递给PHP，并在不刷新页面的情况下使用jQuery显示错误消息

15 浏览
0 Comments

如何使用Ajax将表单数据传递给PHP，并在不刷新页面的情况下使用jQuery显示错误消息

我有一个带有文件上传器的表单。我想在不刷新页面的情况下显示错误消息。我猜我需要使用jQuery显示错误，并使用Ajax将文件传递给PHP脚本。我不确定如何处理这个问题。

这是我的当前代码。提交后，它将重定向到upload.php并在那里显示错误/成功消息，但这不太用户友好。


    
    


 500000) {
    echo "抱歉，您的文件太大了。";
    $uploadOk = 0;
}
// 允许特定的文件格式
if($fileType != "zip" ) {
    echo "抱歉，只允许上传zip文件。";
    $uploadOk = 0;
}
// 检查是否由于错误将$uploadOk设置为0
if ($uploadOk == 0) {
    echo "抱歉，您的文件未上传。";
// 如果一切正常，尝试上传文件
} else {
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
        echo "文件". basename( $_FILES["file"]["name"]). "已上传。";
    } else {
        echo "抱歉，上传文件时出错。";
    }
}
?>

0

3 答案

0 Comments

问题的出现原因：在提交表单数据到PHP时，希望能够使用Ajax实现无刷新页面，并且能够通过jQuery显示错误信息。

解决方法：根据提供的代码，首先需要引入最新的jQuery库文件。然后在HTML中，通过form元素和input元素创建一个表单，并设置method为post，enctype为multipart/form-data，以支持文件上传。在表单中包含一个文件选择框和一个上传按钮。接着，在JavaScript中，使用jQuery的ready()方法，当页面加载完毕后执行函数。在函数中，当点击上传按钮时，通过FormData对象获取文件数据，并使用each()方法将文件数据追加到FormData对象中。然后通过ajax()方法向服务器发送请求，设置url为error.php，data为FormData对象，cache为false，contentType为false，processData为false，type为POST。当请求成功时，通过回调函数显示返回的数据。

在PHP代码中，首先定义了上传文件的目标目录和目标文件名，以及设置上传状态变量和文件类型变量。然后通过pathinfo()函数获取文件的后缀名。接下来进行一系列判断操作，例如判断文件是否已存在、文件大小是否超过限制、文件格式是否符合要求等。根据判断结果，输出相应的错误信息。最后，如果一切正常，使用move_uploaded_file()函数将临时文件移动到目标目录，并输出成功信息。

整理成一篇文章如下：

如何使用Ajax将表单数据传递给PHP，并通过jQuery显示错误消息而不刷新页面

尝试按照以下代码进行操作。

HTML和Script文件

添加最新的.js库文件：[最新js文件](https://jquery.com/download/)

PHP代码

 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
if($fileType != "zip" ) {
    echo "Sorry, only zip files are allowed.";
    $uploadOk = 0;
}
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
} else {
    if (move_uploaded_file($_FILES["file-0"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["file-0"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}
?>

以上就是通过Ajax将表单数据传递给PHP，并通过jQuery显示错误消息而不刷新页面的方法。

0
0 Comments

问题的原因是需要在不刷新页面的情况下将表单数据传递给PHP，并且在出现错误时能够显示错误信息。

解决方法是使用jQuery的Ajax方法来实现。首先，在HTML中，需要包含jQuery库的链接，并创建一个表单，设置其method为post，action为上传文件的PHP文件路径，并添加一个class为upload_form的属性。表单中包含一个文件上传的input和一个提交按钮。

然后，在jQuery部分，使用.on方法来监听表单的submit事件。当表单提交时，使用Ajax方法发送post请求，设置url为上传文件的PHP文件路径，type为post，data为表单的序列化数据。成功时会调用success函数，失败时会调用error函数。在这两个函数中使用console.log打印出响应的内容。

最后，在PHP文件中，首先设置上传文件的目标目录和目标文件名。然后，通过检查文件是否已存在、文件大小是否超过限制以及文件格式是否正确来判断是否出现错误。如果出现错误，将错误信息打印出来；如果一切正常，尝试将文件移动到目标位置，并打印出上传成功的信息。

通过以上的代码和步骤，我们可以在不刷新页面的情况下将表单数据传递给PHP，并在出现错误时显示错误信息。

0
0 Comments

问题的原因是想要通过Ajax将表单数据传递给PHP，并且在不刷新页面的情况下使用jQuery显示错误消息。

解决方法是使用FormData()对象和jQuery的Ajax方法来实现。首先，在HTML代码中创建一个表单，并将其提交事件绑定到一个JavaScript函数submitForm()。在submitForm()函数中，创建一个FormData对象，使用jQuery选择器选择表单元素，并将其作为参数传递给FormData构造函数。然后，使用jQuery的Ajax方法发送POST请求，设置dataType为json，processData和contentType为false，以便正确处理FormData对象。将FormData对象作为data参数传递给Ajax方法，并设置url参数为upload.php。最后，在Ajax请求成功后的回调函数中，可以添加代码来处理上传成功后的操作。

下面是完整的代码示例：

通过以上方法，可以在不刷新页面的情况下使用Ajax将表单数据传递给PHP，并且可以使用jQuery来显示错误消息。

0