最受欢迎

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

Submit form data without refreshing the page with $ajax

本文关键字：ajax 刷新 数据 表单 提交 | 更新日期: 2023-09-27

我正在尝试在不刷新页面的情况下提交表单。我的 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">显示。

它不起作用，因为您的表单是 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) {

试试这个

<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(),

试试这个;

<form id="myForm">

并添加JavaScript;

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

你准备好了。希望这有帮助。

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

示例：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>
相关文章：