提交表单数据而不用 $ajax 刷新页面

Question

我正在尝试提交表单而不刷新页面。我的 php 代码如下所示：

<form>
    <label for="roundcheck" style="color: red; font-size: 16pt;font-family: roboto;">Round: </label>
    <input type="text" name="roundcheck" class="textbox" style="" id="roundcheck" value="<?php $game = fetchinfo("value","info","name","current_game"); echo $game-1; ?>" placeholder="Round number">
    <input type="submit" id="checkbtn" class="button2" value="Check">
</form>
<div id="checkinfo">
</div>

我正在尝试从“checkfair.php”中检索数组并使用 $ajax 将其显示在“checkinfo”中，如下所示：

$(document).ready(function(){
    $('#checkbtn').click(function() {
        $("#checkinfo").show("fast");
        $.ajax({
            type: "GET",
            url: "checkfair.php",
        }).done(function (msg) {
            msg = $.trim(msg);
            if (msg != '[]') {
                var obj = jQuery.parseJSON(msg);
                $("#checkinfo").html=('<p>Round <span style="color:red;">#'+obj.round+'</span><br>Value: <span style="color:red;">$'+obj.value+'</span><br>Winner: <span style="color:red;">'+obj.winner+'</span><br>Hash: <span style="color:red;">'+obj.hash+'</span><br>Salt: <span style="color:red;">'+obj.salt+'</span><br>Ticket: <span style="color:red;">'+obj.ticket+'</span></p>');
            }
        });
    });
});

“checkfair.php”文件如下所示：

<?php
@include_once ("set.php");

$round = $_GET["roundcheck"];
echo json_encode([
    "round" => $round,
    "value" => round(fetchinfo("cost", "games", "id", $round), 2),
    "winner" => fetchinfo("winner", "games", "id", $round),
    "hash" => fetchinfo("hash", "games", "id", $round),
    "salt" => fetchinfo("salt", "games", "id", $round),
    "ticket" => round(fetchinfo("winticket", "games", "id", $round) * 100, 7)
]);
?>

当我按下“checkbtn”而不刷新表单时，我希望所有内容都显示在<div id="checkinfo">。

Answer 1

它不起作用，因为您的表单 a) 根本没有提交，并且 b) 没有将任何数据传递到后端。与其将 AJAX 函数绑定到提交按钮的“单击”事件，不如将其绑定到整个表单的“提交”事件。

尝试如下修改你的 AJAX 函数：

$(document).ready(function(){
    $('#checkbtn').parents('form').submit(function(e) {
        e.preventDefault();
        $("#checkinfo").show("fast");
        $.ajax({
            type: "GET",
            url: "checkfair.php",
            data: $(this).serialize()
        }).done(function (msg) {
            msg = $.trim(msg);
            if (msg != '[]') {
                var obj = jQuery.parseJSON(msg);
                $("#checkinfo").html=('<p>Round <span style="color:red;">#'+obj.round+'</span><br>Value: <span style="color:red;">$'+obj.value+'</span><br>Winner: <span style="color:red;">'+obj.winner+'</span><br>Hash: <span style="color:red;">'+obj.hash+'</span><br>Salt: <span style="color:red;">'+obj.salt+'</span><br>Ticket: <span style="color:red;">'+obj.ticket+'</span></p>');
            }
        });
    });
});

或者，为了使代码更简洁，向表单添加一个特定的选择器并将提交事件处理程序直接绑定到它（而不是使用.parents() 方法）：

$('form#some-id').submit(function(e) {

Answer 2

试试这个

<script>
$(document).ready(function(){
$('#checkbtn').click(function() {
    $("#checkinfo").show("fast");
  $.ajax({
    type: "GET",
    data:"roundcheck="+$("#roundcheck").val(),
    url: "checkfair.php",
}).done(function (msg) {
    msg = $.trim(msg);
    if (msg != '[]') {
        var obj = jQuery.parseJSON(msg);
        $("#checkinfo").html=('<p>Round <span style="color:red;">#'+obj.round+'</span><br>Value: <span style="color:red;">$'+obj.value+'</span><br>Winner: <span style="color:red;">'+obj.winner+'</span><br>Hash: <span style="color:red;">'+obj.hash+'</span><br>Salt: <span style="color:red;">'+obj.salt+'</span><br>Ticket: <span style="color:red;">'+obj.ticket+'</span></p>');
    }
});
});
});
</script>

你忘记发送数据

data:"roundcheck="+$("#roundcheck").val(),

Answer 3

试试这个；

<form id="myForm">

并添加javascript；

$("#myForm").submit(function(e) {
     e.preventDefault();
});

你准备好了。希望对您有所帮助。

Answer 4

只需将其添加到您的表单中，广告字段就会被发布：

示例：http://www.codesheet.org/codesheet/VzXPlp3Z

示例 2：http://www.codesheet.org/codesheet/ycOMf3pi

阿贾克斯：http://www.simonerodriguez.com/wp-content/plugins/downloads-manager/upload/ajaxsbmt.js

<form name="MyForm" action="response_normal.php" method="post" onsubmit="xmlhttpPost('response_ajax.php, 'MyForm', 'MyResult', '<img src=\'pleasewait.gif\'>'); return false;">

响应 div：

<div id="MyResult"></div>