如何使按钮在同一页面上执行但不在下一页上答案

【问题标题】：How to make button execute on same page but not the next page如何使按钮在同一页面上执行但不在下一页上
【发布时间】：2013-09-23 07:55:51
【问题描述】：

大家好，我是网络开发的新手。

用户点击提交按钮后，我有一个带有表单的页面，然后按钮会将表单内容提交到下一页执行并保存到数据库中。

这样，我的页面会转到另一个页面执行并返回到着陆页。

例如：index.php 和 exec.php

index.php:

<form name="g-form" action="gbtn-exec.php" method="post" class="goat-vote" onsubmit="return validategForm()">
<input type="text" name="g-product" placeholder="Brand / Product Name" style="-moz-border-radius: 5px; border-radius: 5px; padding-left:20px; opacity:.5; border:none; margin-left:110px; width:440px; height:38px; font-family:'Proxima Nova Rg';color:#000; font:1.6em;" />


<p class="g-question">Why you love it?</p>

<textarea name="g-reason" style="-moz-border-radius: 5px; border-radius: 5px; padding:5px; opacity:.5; border:none; margin-left:110px; width:450px; height:150px; font-family:'Proxima Nova Rg';color:#333; font-size:1em;"></textarea>

<input name="g-btn" class="vote-btn" type="submit" value="vote" style="margin-left:470px; cursor:pointer;"></form>

exec.php

if ($_POST["g-product"] && $_POST["g-reason"] != "" )
{
$gproduct = $_POST["g-product"];
$greason =  $_POST["g-reason"];

$insert ="INSERT INTO jovine.vote (vote_id ,product_name ,reason ,type) VALUES (NULL, '$gproduct', '$greason', 'goat')";
$result = mysql_query($insert,$con);
echo "<script>";
echo "alert('Thank you. Your vote has been recorded.');";
echo "window.location.href='index.php';";
echo "</script>";
}

我的问题是，如何在 index.php 中执行提交按钮而不转到 exec.php？（意味着将两者结合在一个 .php 中）这是因为当用户单击提交按钮时，它会转到一个空白页面来执行，这看起来不太好。

有人可以帮忙吗？谢谢！ =)

【问题讨论】：

使用ajax方法在后台执行exec.php并在index.php中检索结果
尝试使用 jquery ajax
@DonovanCharpin 我可以知道我应该如何编写脚本吗？我有点不明白 maunal... =(

标签： php jquery html mysql

【解决方案1】：

if (isset($_POST["g-btn"]))
{
 $gproduct = $_POST["g-product"];
 $greason =  $_POST["g-reason"];

 $insert ="INSERT INTO jovine.vote (vote_id ,product_name ,reason ,type) VALUES (NULL, '$gproduct', '$greason', 'goat')";
 $result = mysql_query($insert,$con);
 echo "<script>";
 echo "alert('Thank you. Your vote has been recorded.');";
 echo "window.location.href='index.php';";
 echo "</script>";
}

<html>
<form name="g-form" action="a.php" method="post" class="goat-vote" onsubmit="return validategForm()">
<input type="text" name="g-product" placeholder="Brand / Product Name" style="-moz-border-radius: 5px; border-radius: 5px; padding-left:20px; opacity:.5; border:none; margin-left:110px; width:440px; height:38px; font-family:'Proxima Nova Rg';color:#000; font:1.6em;" />


<p class="g-question">Why you love it?</p>

<textarea name="g-reason" style="-moz-border-radius: 5px; border-radius: 5px; padding:5px; opacity:.5; border:none; margin-left:110px; width:450px; height:150px; font-family:'Proxima Nova Rg';color:#333; font-size:1em;"></textarea>

<input name="g-btn" class="vote-btn" type="submit" value="vote" style="margin-left:470px; cursor:pointer;"></form>
</html>

你可以这样做... isset($_POST["g-btn"]) 将检查它是否被点击？

【讨论】：

【解决方案2】：

编辑：请忽略这一点，似乎没有完全阅读您的问题

试试这样的：

index.php

<form name="g-form" action="gbtn-exec.php" method="post" class="goat-vote" onsubmit="return validategForm()">
    <input type="text" name="g-product" placeholder="Brand / Product Name" style="-moz-border-radius: 5px; border-radius: 5px; padding-left:20px; opacity:.5; border:none; margin-left:110px; width:440px; height:38px; font-family:'Proxima Nova Rg';color:#000; font:1.6em;" />

    <p class="g-question">Why you love it?</p>

    <textarea name="g-reason" style="-moz-border-radius: 5px; border-radius: 5px; padding:5px; opacity:.5; border:none; margin-left:110px; width:450px; height:150px; font-family:'Proxima Nova Rg';color:#333; font-size:1em;"></textarea>

    <?php if(!isset($_GET['hidesubmit'])): ?>
    <input name="g-btn" class="vote-btn" type="submit" value="vote" style="margin-left:470px; cursor:pointer;">
    <?php endif; ?>
</form>

exec.php

if ($_POST["g-product"] && $_POST["g-reason"] != "" )
{
    $gproduct = $_POST["g-product"];
    $greason =  $_POST["g-reason"];

    $insert ="INSERT INTO jovine.vote (vote_id ,product_name ,reason ,type) VALUES (NULL, '$gproduct', '$greason', 'goat')";
    $result = mysql_query($insert,$con);
    echo "<script>";
    echo "alert('Thank you. Your vote has been recorded.');";
    echo "window.location.href='index.php?hidesubmit=1';";
    echo "</script>";
}

【讨论】：

它应该可以工作，但您想要一个无需发送表单即可工作的解决方案 - 我的解决方案发送表单并使用特殊参数重定向到原始页面。根据该参数是否显示提交按钮。

【解决方案3】：

在你的头脑中添加 jQuery 库和你将在 ajax 之后使用的 jQuery perso (myjQuery.js)

index.php

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="/js/myjQuery.js"></script>

无需对表单执行任何操作即可创建表单。

<html>
    <form name="g-form" class="goat-vote">
        <input type="text" name="g-product" placeholder="Brand / Product Name" style="-moz-border-radius: 5px; border-radius: 5px; padding-left:20px; opacity:.5; border:none; margin-left:110px; width:440px; height:38px; font-family:'Proxima Nova Rg';color:#000; font:1.6em;" />
        <p class="g-question">Why you love it?</p>
        <textarea name="g-reason" style="-moz-border-radius: 5px; border-radius: 5px; padding:5px; opacity:.5; border:none; margin-left:110px; width:450px; height:150px; font-family:'Proxima Nova Rg';color:#333; font-size:1em;"></textarea>
        <input name="g-btn" class="vote-btn" value="vote" style="margin-left:470px; cursor:pointer;">
    </form>
</html>

像这样保持你的 exec.php

exec.php

if ($_POST["g-product"] && $_POST["g-reason"] != "" )
{
    $gproduct = $_POST["g-product"];
    $greason =  $_POST["g-reason"];
    $insert ="INSERT INTO jovine.vote (vote_id ,product_name ,reason ,type) VALUES (NULL, '$gproduct', '$greason', 'goat')";
    $result = mysql_query($insert,$con);
    echo "<script>";
    echo "alert('Thank you. Your vote has been recorded.');";
    echo "window.location.href='index.php?hidesubmit=1';";
    echo "</script>";
}

并创建 myjQuery.js

myjQuery.js

$(document).ready(function(){
    $(".vote-btn").on("click", function(){
        g-product = $("input[name='g-product']").val();
        g-reason = $("input[name='g-reason']").val();
        $.ajax({cache:false,dataType:'html',crossDomain:true,type:'POST',
            url:'/php/exec.php',data : {g-product:g-product, g-reason:g-reason},
            success:function(html){
                console.log(html);
            },
            error:function(j,t,e){
                console.log('problem');
            }
        });
    });
});

你可以试试这段代码，可能你的文件的js路径或php路径有问题。还有一些你可以纠正的错误。

【讨论】：