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

submit form without refresh page and load output into html

本文关键字：输出 加载 html 表单 刷新 提交      更新时间：2023-09-26

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

这是我的ajax函数加载php输出html而不离开页面。如果表单有提交按钮，它就不会这么做。它只适用于普通的可点击按钮。 
$('#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页面中显示输出?

结合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 Server Side

<?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",
    },

误差函数

也是一样

注意:我还没有测试过这个，所以不确定它是否会开箱工作或需要任何调试

为什么不将提交按钮替换为普通按钮呢?你可以在jQuery中做的是:

$(formSelector).on('submit',function (e) {
   e.preventDefault()
  //Place your ajax here. 
})

你可以这样做

$('#btnLoad').click(function(){
$.ajax(url, 
{ 
    data: { variable1: $("#variable1").val(), variable2: $("#variable2").val() },
    type: "POST",
    success: function(data) {
        if(data != null) $('#content').text(data);
    }
    });
});

如果我需要通过ajax发送数据，我通常不使用表单，我只使用JS

相关文章：