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

错误功能相同

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

Answer 2

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

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

Answer 3

你可以做点什么

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

提交没有刷新页面的表单并将输出加载到html中

3 个答案: