javascript - 提交表单而不刷新页面并将输出加载到 html 中

Question

我想在不离开页面的情况下将表单信息提交到另一个 php 脚本，并在同一页面中显示输出。

这是我的 ajax 函数，用于在不离开页面的情况下加载 html 中的 php 输出。如果我的表单有提交按钮，则不会这样做。它仅适用于普通的可点击按钮。

$('#btnLoad').click(function(){

    $.ajax({
        type: 'POST',
        url: 'page1.php',
        success: function(data){
                 if(data != null) $('#content').text(data);
         }
     });
});

问题是我需要将 POST 变量发送到我的 PHP 脚本，但是当我这样做时，它会转到我的 PHP 脚本页面。我只希望脚本接收 POST 变量，运行脚本，然后在 HTML 页面中显示输出。

这是不进入 PHP 脚本页面的脚本。我不知道PHP脚本是否使用这个函数运行。

$(function() {
    $('form#myForm').on('submit', function(e) {
        $.post('page1.php', $(this).serialize(), function (data) {

        }).error(function() {

        });
        e.preventDefault();
    });
});

如何将这两个脚本合并为一个，通过 POST 提交变量、运行脚本并在 HTML 页面中显示输出？

Answer 1

结合 Ajax

$("#btnLoad").click(function (e) {
     e.preventDefault()
     $.ajax({
         type: "POST",
         url: "page1.php",
         data: $('#myForm').serialize(),
         success: function (msg) {
             $("#thanks").html(msg);
         },
         error: function (msg) {
             $("#error").html(msg);
         }
     });
 });

显示成功消息的 HTML

<div id="thanks"></div>

显示错误消息的 HTML

<div id="error"></div>

PHP 服务器端

<?php
    if (isset($_POST['submit'])) { //assuming you have input with name="submit"
        //Do what ever you like to do next
        //If everything good
        echo "<strong>Success!</strong> This Is Success Thanks Message. If everything go exactly as Planned.";
    } else {
        echo "<strong>Error!</strong> This Is Error Message. If anything goes south.</div>";
    }
?>

已编辑:OP 要求在 jQuery 模式对话框中显示消息

在 Ajax 中成功调用后，尝试这样

success: function(msg) {
    $("#thanks").html(msg);
    $("#modalId").dialog({
        autoOpen:true,
        width:500,
        title:"Your Error Message",
    },

误差函数也是如此

注意:我还没有对此进行测试，因此不确定它是否可以开箱即用或需要任何调试。