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

I am trying to submit form without refreshing the page. My php code looks like this:

我试图提交表单而不刷新页面。我的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>

I am trying to retrieve array from "checkfair.php" and display it in "checkinfo" using $ajax like this:

$(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" file looks like this:

<?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)
]);
?>

I want everything to be displayed in <div id="checkinfo"> when I press "checkbtn" without refreshing the form.

当我按“checkbtn”而没有刷新表格时,我希望所有内容都显示在

中。

4 个解决方案

#1

It doesn't work because your form is a) not being submitted at all, and b) does not pass any data to the backend. Instead of binding your AJAX function to the "click" event of the submit button, you should bind it to the "submit" event of the whole form.

它不起作用,因为你的表单是a)根本没有提交,b)没有将任何数据传递给后端。您应该将它绑定到整个表单的“submit”事件,而不是将AJAX函数绑定到提交按钮的“click”事件。

Try modifying your AJAX function as follows:

尝试修改您的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>');
            }
        });
    });
});

Or, to make the code a bit cleaner, add a specific selector to the form and bind the submit event handler straight to it (instead of using the .parents() method):

或者,为了使代码更清晰,将特定的选择器添加到表单并将提交事件处理程序直接绑定到它(而不是使用.parents()方法):

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

#2

Try this

<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>

you forget send data

你忘了发送数据

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

#3

try this;

<form id="myForm">

and add javascript;

并添加javascript;

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

and you ready to go. Hope this help.

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

#4

Just add this to your form and ad fields will be posted:

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

Example: http://www.codesheet.org/codesheet/VzXPlp3Z

Example2: http://www.codesheet.org/codesheet/ycOMf3pi

Ajax: 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;">

Response div:

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

#1