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

我想在不离开页面的情况下向另一个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页面中显示输出？

为什么不将提交按钮替换为普通按钮？ 在jQuery中可以做的是：

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

将两者结合在一起

$("#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>

错误函数也是如此

---

注意：我还没有测试它，所以不确定它是否可以开箱即用或者需要任何调试

$('#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。

我有一个输入类型=submit，但如果我想接收POST变量，它不会回显success消息及其内部。但是它是按照我想要的方式工作的，非常感谢，现在我只需要接收if中的post变量，但它不工作：/。然后我可以在html中打印它们吗？

type=submit

意味着它要提交表单，但是也要把

name=“submit”

放进去，就像这样

所以

如果（isset（$\u POST['submit']）

知道你在发布什么东西，你不知道你帮了我多少忙。最后一件事如果你能帮上忙的话，我能用这个函数从php脚本中加载html页面中的Jquery UI对话框吗？还是只加载回显文本？你可以加载它，只需将消息

成功这是成功感谢信息。如果一切都按计划进行。

在

jqueryui对话框中

并从php中删除，并将此

成功：函数（msg）{$（“#谢谢”）.html（msg）}

更改为

成功：函数（）{$（“#modalid”）.show（）}

我不能这样做，因为我有很多消息要显示，它向我展示了除了对话框模式之外的所有脚本。是的，我的网站几乎完成了，它都是用表单制作的。谢谢你的帮助。

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

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

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

    });
});