首页 > web前端 > js教程 > 如何使用 jQuery Ajax POST 和 PHP 来提交表单而不需要页面重定向?

如何使用 jQuery Ajax POST 和 PHP 来提交表单而不需要页面重定向?

Mary-Kate Olsen
发布: 2024-12-24 05:52:14
原创
904 人浏览过

How Can I Use jQuery Ajax POST with PHP to Submit a Form Without Page Redirect?

使用 PHP 的 jQuery Ajax POST:示例

将数据从表单提交到数据库通常需要表单提交,这会导致浏览器重定向。使用 jQuery 和 Ajax,可以通过捕获表单数据并将其提交到 PHP 脚本来克服这个问题。

jQuery 代码:

jQuery 代码如下:

<form>
登录后复制
// Prevent form submission
$("#foo").submit(function(event){
    event.preventDefault();
    
    // Serialize form data
    var serializedData = $("#foo").serialize();
    
    // Ajax request
    $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData,
        success: function (response) {
            console.log("Request successful");
        },
        error: function (error) {
            console.error("Error:", error);
        }
    });
});
登录后复制

PHP脚本:

PHP 脚本(form.php)接收提交的数据:

<?php
    $bar = isset($_POST['bar']) ? $_POST['bar'] : null;
?>
登录后复制

用法:

包装你的 JavaScript文档就绪处理程序中的代码:

$(document).ready(function(){
    // jQuery code
});
登录后复制

记住清理输入处理用户提交的数据时。

jQuery .post 的简写:

$.post('/form.php', serializedData, function(response) {
    console.log("Response:", response);
});
登录后复制

此方法可以与 jQuery 1.5 及更高版本一起使用。

以上是如何使用 jQuery Ajax POST 和 PHP 来提交表单而不需要页面重定向?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板